Question

我有一个带有Kendo Grid的页面。当用户在网格中选择一行时，我更新模板和另一个具有相关信息的网格。我通过创建两个新的DataSource并绑定它们来实现这一点（参见下面的代码）。

为了支持实时更新，我想在DataSource的init（）中附加一个websocket的事件处理程序，以检测此DataSource（基本上是订阅模型）后端的变化。我的问题是，在这个页面中，因为每次用户选择一个项目时我都会得到两个以上的数据源，所以我最终会有很多事件处理程序触发不再使用的DataSources。我想以某种方式清理它们。

我可以看到很多方法来解决这个问题：

在不再使用DataSource时触发一些事件，以便取消注册处理程序并取消订阅。
每次只更改传输中的url，而不是每次都创建一个新的DataSource。但是，我想要在传输更改时触发某个事件，以便事件处理程序知道需要更改订阅。
我目前做的事情：在DataSource中添加一个名为nuke（）的自定义方法，我在创建新的DataSource之前调用它。容易出错，但功能正常。

或者我完全以错误的方式解决这个问题？也许有一些通用的方法来触发Kendo对象的变化？

下面的代码演示了导致问题的天真方法。它也可以在这里找到：http://dojo.telerik.com/OKaDu

请注意，示例代码使用过滤器，但在我的实际代码中，它是更改的URL。虽然如果有一种方法可以触发改变过滤器，那也很酷。

<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.mobile.all.min.css">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid"></div>
    <div id="detail">
      Employee ID: <span data-bind="text: EmployeeID"></span><br>
      FirstName: <span data-bind="text: FirstName"></span><br>
      LastName: <span data-bind="text: LastName"></span><br>
    </div>
    <div id="orders"></div>
    <script>
      var element = $("#grid").kendoGrid({
        dataSource: {
          type: "odata",
          transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
          },
          pageSize: 6,
          serverPaging: true,
          serverSorting: true
        },
        height: 450,
        selectable: "row",
        sortable: true,
        pageable: true,
        columns: [
          {
            field: "FirstName",
            title: "First Name"
          },
          {
            field: "LastName",
            title: "Last Name"
          },
          {
            field: "Country"
          },
          {
            field: "City"
          },
          {
            field: "Title"
          }
        ],
        change: function(e) {
          var selectedRows = this.select();
          var dataItem = this.dataItem(selectedRows[0]);

          var remoteDataSource = new kendo.data.DataSource({
            type: "odata",
            transport: {
              read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
            },
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            pageSize:6,
            filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }
          });
          remoteDataSource.fetch(function(){
            kendo.bind("#detail", remoteDataSource.view()[0]);
          });
          $("#orders").kendoGrid({
            dataSource: {
              type: "odata",
              transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
              },
              serverPaging: true,
              serverSorting: true,
              serverFiltering: true,
              pageSize:6,
              filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }
            },
            scrollable: false,
            sortable: true,
            pageable: true,
            columns: [
              { field: "OrderID", width: 70 },
              { field: "ShipCountry", title:"Ship Country", width: 100 },
              { field: "ShipAddress", title:"Ship Address" },
              { field: "ShipName", title: "Ship Name", width: 200 }
            ]
          });
        }
      });
    </script>
</body>
</html>

如何确定何时不再使用DataSource

0 个答案: