KendoUI 寻呼机 - 寻呼机为每个先前的数据源调用 Web 服务答案

【问题标题】：KendoUI pager - pager calling web service for each previous datasourceKendoUI 寻呼机 - 寻呼机为每个先前的数据源调用 Web 服务
【发布时间】：2014-03-05 14:47:29
【问题描述】：

我有一个 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);
    }
});

【问题讨论】：

我不明白这个问题。您说每次页面时它都会进入服务器。这不是预期的行为吗？毕竟，每次指向新的特定 URL 时，您都会创建新的数据源
预期的行为是每次我页面请求当前数据源时它都会返回服务器。我得到的实际行为是它正在向服务器请求当前数据源和所有以前的数据源。
你给bindGrid打了多少次电话？如果您多次调用它并且您没有破坏您之前在pager 和listView 中拥有的任何内容，那么您实际上将多个 Pagers 和 ListViews 绑定到这些元素，那么您看到的内容可能是有意义的。 bindGrid的目的是什么？
bindGrid （可能不是一个好名字！）每当树视图中的选择发生变化时都会被调用。如何删除已经存在的寻呼机/列表视图？
@OnaBai - 感谢您的指点，当我调用该方法时，我没有意识到这是发生了什么，我认为它只是在更新现有的方法。我现在已将其更改为使用 setDataSource() 方法，而不是每次都绑定它，而且效果很好。感谢您的帮助:)

标签： jquery json kendo-ui

【解决方案1】：

每当您执行以下操作时：

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

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

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

【讨论】：