javascript - 如何使用 KnockoutJS 将客户端分页添加到表中？

Question

如何使用 KnockoutJS 添加分页？

我当前的代码是:

//assuming jsondata is a collection of data correctly passed into this function

myns.DisplayFields = function(jsondata) {
    console.debug(jsondata);
    window.viewModel = {
        fields: ko.observableArray(jsondata),
        sortByName: function() { //plus any custom functions I would like to perform
            this.items.sort(function(a, b) {
                return a.Name < b.Name ? -1 : 1;
            });
        },
    };

    ko.applyBindings(viewModel);
}

我的看法:

<table>
  <tbody data-bind='template: "fieldTemplate"'></tbody>
</table>

<script type="text/html" id="fieldTemplate">
{{each fields}}
    <tr>
         <td> ${ FieldId }</td>
         <td>${ Type }</td>
         <td><b>${ Name }</b>: ${ Description }</td>
    </tr>
{{/each}}
</script>

我可以或会使用 jQuery、jQuery UI 或其他库吗？

我在 KnockoutJS 网站上看到的例子:

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

但是，我应该在哪里将 pageSize 添加到我的代码中？这个 pageSize 是如何在内部运行的？

Answer 1

基本思想是你有一个 dependentObservable Computed Observables代表您当前页面中的行并将您的表绑定(bind)到它。您将对整个数组进行切片以获取页面的行。然后，您有操纵页面索引的寻呼机按钮/链接，这会导致重新评估 dependentObservable，从而产生当前行。

根据您的代码，类似于:

var myns = {};
myns.DisplayFields = function(jsondata) {
    var viewModel = {
        fields: ko.observableArray(jsondata),
        sortByName: function() { //plus any custom functions I would like to perform
            this.items.sort(function(a, b) {
                return a.Name < b.Name ? -1 : 1;
            });
        },
        pageSize: ko.observable(10),
        pageIndex: ko.observable(0),
        previousPage: function() {
            this.pageIndex(this.pageIndex() - 1);
        },
        nextPage: function() {
            this.pageIndex(this.pageIndex() + 1);
        }
    };

    viewModel.maxPageIndex = ko.dependentObservable(function() {
        return Math.ceil(this.fields().length / this.pageSize()) - 1;
    }, viewModel);

    viewModel.pagedRows = ko.dependentObservable(function() {
        var size = this.pageSize();
        var start = this.pageIndex() * size;
        return this.fields.slice(start, start + size);
    }, viewModel);

    ko.applyBindings(viewModel);
};

因此，您可以将表格绑定(bind)到 pagedRows。

此处示例:http://jsfiddle.net/rniemeyer/5Xr2X/