Как повторно использовать kendo ui remote binding datasource (change transport.read.data, затем обновить)

Question

Я хочу спросить, можно ли повторно использовать удаленное связывание kendo.data.Datasource вместо создания нового с новыми параметрами.

Мой сценарий заключается в том, что у меня есть окно поиска и вид списка. Когда пользователь вводит в поле поиска, запрос отправляется на сервер с параметром значения поля поиска. Я смог сделать это отлично, создав новый kendo.data.Datasource каждый случай keyup, но память стала для меня проблемой.

var viewModel = kendo.observable({ 
 
    searchId: "", // searchbox value 
 
    searchResult: null, // search result listview datasource 
 
    searchFnc: function() { // search function 
 
    // QUESTION: is there any way to update the current datasource object 
 
    // to refresh the list view instead of create new object? 
 
    // something like: 
 
    // this.set("searchResult.options.transport.read.data.postId", this.get("searchId")); 
 

 
    this.set("searchResult", new kendo.data.DataSource({ 
 
     transport: { 
 
     read: { 
 
      url: "http://jsonplaceholder.typicode.com/comments", 
 
      dataType: "jsonp", 
 
      data: { 
 
      postId: this.get("searchId") 
 
      } 
 
     } 
 
     } 
 
    })); 
 
    } 
 
}); 
 

 
kendo.bind($("#myView"), viewModel);

.item { 
 
    list-style: none; 
 
} 
 
.item span { 
 
    display: inline-block; 
 
    min-width: 40px; 
 
} 
 
#myListView { 
 
    min-height: 50px; 
 
}

<link href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" rel="stylesheet" /> 
 
<link href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script> 
 

 

 

 
<div id="myView"> 
 
    <label>Enter Post ID (1,2,3,4...) 
 
    <label> 
 
     <br/> 
 
     <span class="k-textbox k-space-right"> 
 
    <input type="text" data-value-update="keyup" data-bind="value: searchId, events: {keyup: searchFnc}"/> 
 
    <a href="javascript:;" class="k-icon k-i-search" data-bind="click: searchFnc">&nbsp;</a> 
 
    </span> 
 

 
     <ul id="myListView" data-role="listview" data-bind="source: searchResult" data-template="template-search-result"> 
 
     </ul> 
 
</div> 
 

 
<script type="text/x-kendo-template" id="template-search-result"> 
 
    <li class="item"> 
 
    <span>#: postId #</span> 
 
    <span>#: id #</span> 
 
    <span>#: name #</span> 
 
    </li> 
 
</script>

Answer 1

Что об этом? change-datasource-url-on-grid. Он использует функцию аналогичную вашей (options.transport.read.url) от кендо. Затем он обновляется с .refresh().

Answer 2

Это, как я хотел бы сделать это fiddle

var viewModel = kendo.observable({ 
    searchId: 1, 
    searchResult: new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: function() { 
        return "https://jsonplaceholder.typicode.com/" + viewModel.get("searchId") + "/comments" 
       }, 
       dataType: "jsonp" 
      } 
     } 
    }), 
    searchFnc: function() { 
     this.searchResult.read(); 
    } 

}); 

kendo.bind($("#myView"), viewModel);