淘汰赛模板创建分页UI /链接类似的StackOverflow(Knockout template

我有与基于淘汰赛共享数据网格的工作有些分页UI一个正常运作的淘汰赛模板。此模板使每个“页”网格数据的HREF。

模板工程，但是，因为如果我取了大量的数据是klunky，然后我结束了数十座的网格下方的导航页面的链接。下面是当前模板：

<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);

我怎样才能修改模板和模式，使类似的分页UI到计算器？

例如：

先前1 ... 3 4 5 6 7 ... 69下

Answer 1:

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

我刚刚完成我抽出几个项目中，为扩展到淘汰赛寻呼机功能和模板的例子。

见https://github.com/remcoros/ko.pager源和http://remcoros.github.com/ko.pager/example.html的工作的例子。

所有的计算和一些方便的特性是由“寻呼机”类，你可以创建和绑定来提供。但是，一个例子工作模板包括在内。

请参阅使用源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.
        }
    }
};