7

我有一个用于某些分页 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 下一页

4

3 回答 3

19

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

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

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

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

有关用法，请参见源代码 example.html。

于 2012-11-02T20:59:07.187 回答
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.
        }
    }
};
于 2012-08-21T06:26:56.397 回答
1

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

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

于 2012-08-21T08:20:20.853 回答