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/

Answer 2

你实现了自己想要的目标吗？

我最近推出了一个使用knockout到github的好的寻呼机的例子。

有关来源的信息，请参见https://github.com/remcoros/ko.pager，有关工作示例，请参见http://remcoros.github.com/ko.pager/example.html。

所有计算和一些方便的属性都由'Pager'类提供，您可以创建并绑定到该类。包含一个示例工作模板。

有关某些文档和用法，请参阅源example.html。

Answer 3

也许https://github.com/addyosmani/backbone.paginator适合你？从Github页面：

Backbone.Paginator是一组用于使用Backbone.js对数据集合进行分页的自以为是的组件。它旨在提供两种解决方案，用于协助对服务器（例如API）的请求分页以及单个数据加载的分页，其中我们可能希望进一步将N个结果的集合分页到视图内的M个页面中。

如何使用KnockoutJS向表添加客户端分页？

3 个答案: