Comment réutiliser la source de données de liaison distante de kendo ui (changer transport.read.data puis rafraîchir)

Question

Je voudrais demander s'il est possible de réutiliser une liaison à distance kendo.data.Datasource au lieu de créer une nouvelle avec de nouveaux paramètres.

Mon scénario est que j'ai un champ de recherche et une vue de liste. Lorsque l'utilisateur entre dans la boîte de recherche, une requête est envoyée au serveur avec le paramètre de la valeur de la boîte de recherche. J'ai été en mesure de le faire fonctionner bien en créant un nouvel événement kendo.data.Datasourcekeyup mais la mémoire est devenue une préoccupation pour moi.

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

Qu'en est-ce? change-datasource-url-on-grid. Il utilise une fonction similaire à la vôtre (options.transport.read.url) de kendo. Ensuite, il est mis à jour avec .refresh().

Answer 2

Voici comment je le ferais 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);