使用 Knockout.JS 构建分页控件答案

【问题标题】：Building pagination controls with Knockout.JS使用 Knockout.JS 构建分页控件
【发布时间】：2013-04-12 13:52:35
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

在淘汰赛中构建一个计算出的 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 调用，并使用返回的项目更新模型。 “next”函数（要添加到视图模型原型中）可能如下所示：

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

【讨论】：

【解决方案2】：

在 KO 中编写特性总是比在“plain JS”、jQuery 或类似代码中生成更少的代码和更简洁的代码。所以去吧！

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

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

【讨论】：

【解决方案3】：

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

基本上，我使用 AJAX 的普通敲除数据绑定，在从服务器检索数据后，我调用插件。你可以在这里找到插件。它叫Simple Pagination。

【讨论】：