敲除模板以创建分页UI/类似于StackOverflow的链接 [英] Knockout template to create pagination UI / links similar to StackOverflow

问题描述

我有一个用于某些分页UI的功能性Knockout模板，该模板可与基于Knockout的共享数据网格一起使用.此模板为网格中数据的每个页面"呈现一个HREF.

I have a functioning Knockout template for some pagination UI that works with a Knockout-based shared data grid. This template renders an HREF for each "page" of data in the grid.

模板可以工作，但是它很笨拙，因为如果我获取大量数据，那么最终我会在网格下方获得数十个导航页面链接.这是当前模板:

The template works but it's klunky because if I fetch a lot of data, then I end up with dozens and dozens of navigation page links below the grid. Here's the current template:

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

The 'currentPageIndex' value is just a simple ko observable in the model:

this.currentPageIndex = ko.observable(0);

'maxPageIndex'是模型中可观察到的计算值:

And 'maxPageIndex' is a computed observable in the model:

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

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

How can I modify the template and model to enable paging UI similar to StackOverflow?

例如:

上一页1 ... 3 4 5 6 7 ... 69下一个

推荐答案

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

This is exactly the pager style I have been using for a while now.

我刚刚将在多个项目中使用的寻呼机功能提取为示例的模板扩展.

I just finished extracting the pager functionality I used on several projects, into an extension to knockout and template by example.

请参阅 https://github.com/remcoros/ko.pager 了解源信息，并http://remcoros.github.com/ko.pager/example.html 中的示例.

See https://github.com/remcoros/ko.pager for the source and http://remcoros.github.com/ko.pager/example.html for a working example.

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

All computations and some convenient properties are provided by the 'Pager' class, which you can create and bind to. But an example working template is included.

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

See the source example.html for usage.

这篇关于敲除模板以创建分页UI/类似于StackOverflow的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！