Question

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

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

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

是否可以修改ViewModel以绑定分页链接（包括需要时的“上一个”和“下一个”链接），还是我最好在普通JS中编写它？

Answer 1

在knockout中构建一个计算的observable应该很容易，它显示了整个页面列表的“窗口”。例如，添加到视图模型：

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”绑定绑定到 pagedList 而不是完整列表，在前向和后向链接中，只需更改 pageIndex 的值。从那里开始，您应该能够使其更强大/提供更多功能。

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

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调用，但任何方法都可以）

Answer 2

在KO中编写功能总是比在“普通JS”，jQuery或类似代码中编写更少的代码和更清晰的代码。所以去吧！

我用这样的分页实现了一个组合框

https://github.com/AndersMalmgren/Knockout.Combobox/blob/master/src/knockout.combobox.js#L229

Answer 3

在我的博文中，我已经详细解释了如何做到这一点。你可以找到它（这里。http://contractnamespace.blogspot.com/2014/02/pagination-with-knockout-jquery.html）。它很容易实现，您可以使用简单的JQuery插件来实现。

基本上，我使用了与AJAX的正常淘汰数据绑定，并且在从服务器检索数据之后，我调用了插件。你可以在这里找到插件。它被称为Simple Pagination。

使用Knockout.JS构建分页控件

3 个答案: