2

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

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

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

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

4

3 回答 3

2

在淘汰赛中构建一个计算出的 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 调用，但任何方法都可以）

于 2013-04-19T08:24:06.940 回答
0

在 KO 中编写特性总是倾向于生成更少的代码和更清晰的代码，而不是在“plain JS”、jQuery 或类似中编写相同的代码。所以去吧！

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

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

于 2013-04-19T08:27:14.340 回答
0

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

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

于 2014-02-20T08:27:35.223 回答