Question

首先我使用knockout js成功显示数据，这是我的代码：

Js

var viewMode = {
    lookupCollection: ko.observableArray()
};

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "/Home/GetIndex",
    }).done(function (data) {
        $(data).each(function (index, element) {
            viewModel.lookupCollection.push(element);
        });       
        ko.applyBindings(viewMode);
    }).error(function (ex) {
        alert("Error");
    });
});

查看：

<table class="paginated">
<tr>
  <th>
   Name
  </th>
  <th>
   Price
  </th>
  <th>
      Category
  </th>
    <th></th>
</tr>
<tbody data-bind="foreach: lookupCollection">
  <tr>
   <td data-bind="text: Name"></td>
   <td data-bind="text: price"></td>
   <td data-bind="text: Category"></td>
   <td>
    <button class="btn btn-success">Edit</button>
    <button class="btn btn-danger">Delete</button>
   </td>
  </tr>
</tbody>
</table>

但是，我需要更多代码来分页列表项，我关注此网站http://knockoutjs.com/examples/grid.html并重播我的代码，但它没有显示我的列表项：

JS：

var initialData = {
    lookupCollection: ko.observableArray()
};

var PagedGridModel = function (items) {
    this.items = ko.observableArray(items);

    this.sortByName = function () {
        this.items.sort(function (a, b) {
            return a.name < b.name ? -1 : 1;
        });
    };

    this.jumpToFirstPage = function () {
        this.gridViewModel.currentPageIndex(0);
    };

    this.gridViewModel = new ko.simpleGrid.viewModel({
        data: this.items,
        columns: [
            { headerText: "Name", rowText: "Name" },
            { headerText: "Category", rowText: "Category" },
            { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
        ],
        pageSize: 4
    });
};

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "/Home/GetIndex",
    }).done(function (data) {
        $(data).each(function (index, element) {
            viewModel.lookupCollection.push(element);
        });       
        ko.applyBindings(new PagedGridModel(initialData));
    }).error(function (ex) {
        alert("Error");
    });
});

查看：

<div data-bind='simpleGrid: gridViewModel'> </div>
    <button data-bind='click: sortByName'>
    Sort by name
</button>

<button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
    Jump to first page
</button>

非常感谢你的答案：

Answer 1

您尝试使用的“simpleGrid”绑定是自定义绑定，默认情况下在淘汰赛中不可用。

以下是使用计算的observable进行分页的简单示例：

小提琴：http://jsfiddle.net/RapTorS/qLHwx/

var viewModel = function () {
    var self = this;

    self.pageSize = 4;
    self.currentPage = ko.observable(1);
    self.lookupCollection = ko.observableArray([]);

    self.currentCollection = ko.computed(function () {
        var startIndex = self.pageSize * (self.currentPage() - 1);
        var endIndex = startIndex + self.pageSize;
        return self.lookupCollection().slice(startIndex, endIndex);
    });
};

使用knockout js进行分页

1 个答案: