KendoUI寻呼机-为每个以前的数据源调用web服务的寻呼机

Question

我有一个Kendo UI列表视图，它与Kendo寻呼机相结合，以显示从服务器返回的分页数据。这一切都很好，没有问题，分页和排序都是在服务器端完成的，没有问题。

我在页面上还有一个树视图，用于选择当前类别——当树中选定的节点发生更改时，列表视图和寻呼机将用新的数据源更新。到目前为止，一切都很好。

当我试图移动到另一个页面时，就会出现问题。之后，寻呼机/列表视图会向服务器发送一个请求，请求其以前的每个数据源。

例如，假设我将数据源设置为类别14，然后设置为类别15，我会在服务器上收到一个包含相关页码的14和15的请求。我在网上找不到任何关于这件事的信息，所以可能只是我做错了什么，但我也能够将样本分离成几乎完全正确的问题，我也有同样的行为。

列表视图/寻呼机

function bindGrid(categoryId) {
var sourceURL = 'api/items/' + categoryId;
dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: sourceURL,
dataType: "json"
}
},
scrollable: {
virtual: true
},
serverSorting: true,
serverPaging: true,
serverFiltering: true,
pageSize: 8,
schema: {
data: function (data) { return data.Items; },
total: function (data) { return data.Count; },
},
});
$("#pager").kendoPager({
dataSource: dataSource
});
$("#listView").kendoListView({
dataSource: dataSource,
template: kendo.template($("#template").html()),
});
}

树视图：

$("#treeView").kendoTreeView({
dataSource: categories,
dataTextField: "Name",
dataValueField: "CategoryId",
select: function (e) {
var currentCatId = this.dataItem(e.node).CategoryId;
bindGrid(currentCatId);
}
});

Answer 1

无论何时执行以下操作：

$("#pager").kendoPager({
dataSource: dataSource
});
$("#listView").kendoListView({
dataSource: dataSource,
template: kendo.template($("#template").html()),
});

您正在创建一个新的KendoUI小部件，这意味着如果您多次调用bindGrid，您将得到多个小部件，然后将DataSources绑定到同一HTML元素。

尝试销毁以前的内容，或者更有效地触发对新数据的读取。