javascript - Knockout-Kendo Grid 中的服务器分页绑定(bind)到 viewmodel 中的本地(服务器填充)ko.observableArray 属性

Question

我正在使用Knockout-Kendo.js我的 js + HTML5 SPA 的库。在我的 View 模型中，我有一个 myItems Knockout Observable Array。我有一个客户端存储库，负责从服务器获取数据并保存它。我希望能够根据对 API 的 POST 请求来填充我的 View 模型中的 myItems，该 API 将过滤器对象(包含过滤器和分页信息)发送到服务器并返回过滤项的列表。

• 据我所知，Knockout-Kendo 不支持 Kendo Grid 数据源。我应该通过其 data 属性而不是 dataSource 设置源。我对吗？如果可以，我能达到下面问题的要求吗？
• 如何设置网格选项，以便为服务器分页设置结果总数、页码、顶部、跳过等？ (例如，我应该能够根据 Kendo Grid 的点击页码在 viewmodel 中设置过滤器对象，并将其与我的 POST 请求一起发送到服务器。)
• 此外，为了能够获取分页的项目总数，我是否应该以如下格式从服务器接收 JSON 数据:{total: 675, data: {包含当前项目的一些 JSON 数组页}} 或者有其他方法可以实现此目的？

Answer 1

如果需要，您实际上可以在 Knockout-Kendo 中直接使用数据源。如果您使用 false 或 {} 指定 data 选项，然后还指定 dataSource 选项，那么它将使用它。

例如，您可以像这样绑定(bind)它:

<div data-bind="kendoGrid: gridOptions"></div>

使用 View 模型:

var grid = {
  data: false,
  dataSource: {
    type: "odata",
    transport: {
      read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema: {
      model: {
        fields: {
          OrderID: {
            type: "number"
          },
          Freight: {
            type: "number"
          },
          ShipName: {
            type: "string"
          },
          OrderDate: {
            type: "date"
          },
          ShipCity: {
            type: "string"
          }
        }
      }
    },
    pageSize: 50,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true
  },
  height: 250,
  sortable: true,
  pageable: true,
  columns: [{
    field: "OrderID",
    filterable: false
  },
    "Freight", {
    field: "OrderDate",
    title: "Order Date",
    width: 100,
    format: "{0:MM/dd/yyyy}"
  }, {
    field: "ShipName",
    title: "Ship Name",
    width: 200
  }, {
    field: "ShipCity",
    title: "Ship City"
  }]
};

ko.applyBindings({
  gridOptions: grid
});

示例:http://jsfiddle.net/rniemeyer/shwrb/