Question

我有这两个基本网格（http://jsbin.com/zofoje），在选择一个网格中的行时，另一个网格应相应更新（例如：此处：应为所选员工显示第二个网格中的订单）：

<div id="view1" style="width: 30rem; float: left">

  <div data-role="grid" id="grid1"
     data-columns="[
                   { 'field': 'EmployeeID'}
                   ]"
     data-selectable="true"
     data-bind="source: dataSource, events: {change: onGrid1Select}"
     >
  </div>

    <div data-role="grid" id="grid2" 
     data-columns="[
                   { 'field': 'EmployeeID'},
                   { 'field': 'OrderID'}
                   ]"
     data-bind="source: dataSource"
     >
    </div>

我尝试使用2个视图模型，我想获得第二个网格的传输操作的干净访问。但是，我没有尝试任何尝试：

var viewModel1 = kendo.observable({
  selectedEmployeeID: 1,
  dataSource: new kendo.data.DataSource({
    type: "odata",
    transport: {
      read: {
        url: "http://demos.kendoui.com/service/Northwind.svc/Employees"  
      }
    },
    schema: {
      model: {
        id: "EmployeeID"
      }
    },
  }),
  onGrid1Select: function(e){
    var grid1 = $("#grid1").data("kendoGrid");
    var model = grid1.dataItem(grid1.select());
    this.set("selectedEmployeeID", model.EmployeeID);
    console.log("selectedEmployeeID: ", this.get("selectedEmployeeID"));

  }
})

var viewModel2 = kendo.observable({
  dataSource: new kendo.data.DataSource({
    type: "odata",
    transport: {
      read: {
        url: "http://demos.kendoui.com/service/Northwind.svc/Orders"  
      }
    },
    filter: {
      field: "EmployeeID", 
      operator: "eq", 
      value: viewModel1.get("selectedEmployeeID")
    },
    schema: {
      model: {
        id: "OrderID"
      }
    },
  }) 
})

    kendo.bind($("#view1"), viewModel1);
    kendo.bind($("#view2"), viewModel2);

我在这里看到一个类似的例子，虽然它不是mvvm，但它可以使用本地数据http://jsfiddle.net/scaillerie/UbeXn/1/。在我的情况下，如何更新第二个网格的数据源？

Answer 1

dataSource Filter不会监听可能用于设置其参数的任何变量的更改。它基本上只是对这些值设置时的内容进行了快照。如果要根据新值过滤dataSource，则需要重做过滤器。

在onGrid1Select函数中添加这样的东西应该可以解决问题：

viewModel2.get("dataSource").filter({field: "EmployeeID", operator: "eq", value: this.get("selectedEmployeeID")});

剑道 - 选择网格的单元更新另一个网格（mvvm）

1 个答案: