用于创建类似于 StackOverflow 的分页 UI/链接的 Knockout 模板

Question

我有一个用于某些分页 UI 的功能性 Knockout 模板，它与基于 Knockout 的共享数据网格一起使用。此模板为网格中的每个“页面”数据呈现一个 HREF。

该模板有效，但它很笨拙，因为如果我获取大量数据，那么我最终会在网格下方出现数十个导航页面链接。这是当前模板：

<div class="idTemplate_ko_simpleGrid_pageLinks">
    <p>
        <span>Go to page:</span>
        <!-- ko foreach: ko.utils.range(0, maxPageIndex) -->
            <a href="javascript:void(0);"
               class="grid-pagination" 
               data-bind="text: $data + 1, click: function() { $root.currentPageIndex($data) }, css: { selected: $data == $root.currentPageIndex() }"></a>
        <!-- /ko -->
    </p>
</div>

'currentPageIndex' 值只是模型中可观察到的简单 ko：

this.currentPageIndex = ko.observable(0);

而 'maxPageIndex' 是模型中计算出来的 observable：

this.maxPageIndex = ko.computed(function () {
    return Math.ceil(ko.utils.unwrapObservable(this.filteredItems()).length / this.pageSize()) - 1;
}, this);

如何修改模板和模型以启用类似于 StackOverflow 的分页 UI？

例如：

上一页 1 ... 3 4 5 6 7 ... 69 下一页

Answer 1

我要做的第一件事是查看是否有任何自定义绑定或库可以执行此操作。如果有，请创建一个使用该库的自定义绑定。

备份计划 - 制作您自己的自定义绑定。 我会做类似的东西：

<div data-bind="pagination: { maxIndex: maxPageIndex(), numToShow: 7 }">
...
</div>

然后在我的自定义绑定中，执行以下操作：

ko.bindingHandlers.pagination = {
    update: function(element, valueAccessor) {
        if (valueAccessor().maxPageIndex > valueAccessor().numToShow) {
            // use jquery to loop and append new $("<a>") tags to $(element), using "1", then ... and a segment in the middle, followed by ... and the last index.
        }
        else {
            // loop over the regular amount.
        }
    }
};

Answer 2

我太好了，所以我在两分钟内为你做了一个：P（所以它可能有错误） 它基于我发现的第一个寻呼机，即 jQuery 分页

http://jsfiddle.net/tymTz/2/

Answer 3

这正是我使用了一段时间的寻呼机样式。

我刚刚将我在几个项目中使用的寻呼机功能提取到一个扩展中，以通过示例进行淘汰和模板。

请参阅https://github.com/remcoros/ko.pager 获取源代码和http://remcoros.github.com/ko.pager/example.html 获取工作示例。

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

查看源代码 example.html 以了解用法。