如何使用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,它代表当前页面中的行并将你的表绑定到它.您可以对整个数组进行切片以获取页面的行.然后,您具有操作页面索引的寻呼机按钮/链接,这会导致依赖于ObOservable,从而导致当前行.

根据您的代码,例如:

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);
};

所以,你会把你的表绑定到pagedRows.

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