Templates 用于创建分页UI/链接的敲除模板，类似于StackOverflow

我为一些分页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>

“maxPageIndex”是模型中计算的可观测值：

this.currentPageIndex = ko.observable(0);

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

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

例如：

---

上一篇。。。3 4 5 6 7 ... 69下一步

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

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

<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.
        }
    }
};

ko.bindingHandlers.pagination={
更新：函数（元素、值访问器）{
if（valueAccessor（）.maxPageIndex>valueAccessor（）.numToShow）{
//使用jQuery循环并将新的$（“”）标签追加到$（元素）中，使用“1”，然后……和中间的一个段，接着是…和最后一个索引。
}
否则{
//循环使用常规量。
}
    }
};

我很好，所以我在两分钟内为你做了一个：p（所以它可能有bug） 它基于我找到的第一个分页器，即jQuery分页

---

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

我刚刚完成了将几个项目中使用的寻呼机功能提取到knockout和template by example的扩展中

有关源代码和工作示例，请参见

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

---

有关用法，请参见source example.html

现在看看这个，并试图改造我自己的电网。穿JSFIDLE很好看。提前谢谢。我会在移植手术完成后再报告。我会的，但我想先核实一下我是否真的能够进行转化。我的第一次尝试失败了，因为我在同一个页面上有多个KO数据模型，并且正在使用以下语法连接：KO.applyBindings（myViewModel，$bindingTarget.get（0））；从未见过applyBindings的这种用法，参数2应该是DOM元素第二个参数解析为DOM元素（假设$bindingTarget是有效的jQuery对象）。例如：var$bindingTarget=$（“#idMyBindingTarget”）；如果我在ko.applyBindings（…）中使用：$bindingTarget.get（0），我可以微调哪些元素参与了Knockout的“数据绑定”世界。在我的案例中，我有一个单页web应用程序，它有几十个不同的绑定区域。不管怎样，我一定会在我的手术一完成就把这个标记为答案！：-）我最终接受了下面的答案，因为这是一个非常完美的解决方案（尽管是在这个答案几个月后提交的）。我最终推出了自己的非常简单的实现，类似于这个版本，但没有所有的炫酷。我喜欢我在这里看到的，所以我将接受这个答案，即使它不是我使用的解决方案。当我有时间的时候，我会尝试删除我的代码并用这个代码替换它。谢谢