javascript - 使用 Knockout.JS 构建分页控件

Question

我继承了一个使用 Knockout.JS 呈现帖子列表的项目。客户要求对该列表进行分页，我想知道使用 Knockout.JS 是否可能且合适。我可以用纯 JavaScript 轻松实现这一点，但我想使用 Knockout(如果合适)来保持一致性。

据我所知，该页面在页面的 HTML 中使用了 native 模板。有一个 ViweModel 将帖子存储在 ko.ObservableArray() 和帖子模型中。

数据通过 jQuery ajax 调用加载，其中返回的 JSON 映射到后模型对象，然后传递到负责数据绑定(bind)的 ObservableArray。

是否可以修改 ViewModel 以绑定(bind)分页链接(需要时包括“上一个”和“下一个”链接)，或者我最好用纯 JS 编写它？

Answer 1

在 knockout 中构建一个计算的可观察值应该很容易，它显示完整页面列表的“窗口”。例如添加到 View 模型:

this.pageIndex = ko.observable(1);
this.pagedList = ko.computed(function() {
   var startIndex = (this.pageIndex()-1) * PAGE_SIZE;
   var endIndex = startIndex + PAGE_SIZE;
   return this.fullList().slice(startIndex, endIndex);
}, this);

然后将显示记录的“foreach”绑定(bind)绑定(bind)到pagedList而不是完整列表，并且在前向和反向链接中，只需更改pageIndex的值。从那里开始，您应该能够使其更加强大/提供更多功能。

此外，这假设您无论如何都将所有数据预加载到客户端。还可以对上一个和下一个链接进行 JSON 调用，并使用返回的项目更新模型。 “下一个”函数(要添加到 View 模型原型(prototype)中)可能如下所示:

ViewModel.prototype.next = function() {
   var self = this;
   this.pageIndex(this.pageIndex()+1);
   $.ajax("dataurl/page/" + this.pageIndex(), {
       success: function(data) {
          self.dataList(data);
       }
   });
}

(为简洁起见，使用 jQuery 语法进行 ajax 调用，但任何方法都可以)