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

Question

我有一个可运行的 Knockout 模板，用于某些分页 UI，可与基于 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”是模型中计算的可观察值：

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

这正是我已经使用了一段时间的寻呼机风格。

我刚刚完成将在几个项目中使用的寻呼机功能提取到示例中的淘汰赛和模板扩展中。

请参阅 https://github.com/remcoros/ko.pager 了解源代码，以及 http://remcoros.github.com/ko.pager/example.html 了解工作示例。

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

请参阅源 example.html 了解用法。

Answer 2

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

备份计划 - 制作您自己的自定义装订。 我会做这样的事情：

<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 3

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

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