Question

我有一个功能齐全的Knockout模板，适用于一些与基于Knockout的共享数据网格配合使用的分页UI。此模板为网格中的每个“页面”数据呈现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 observable：

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？

例如：

prev 1 ... 3 4 5 6 7 ... 69 next

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（所以它可能有bug）它基于我发现的第一个寻呼机，它是jQuery分页

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

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

3 个答案: