Eu tenho um modelo Knockout funcional para alguma interface de usuário de paginação que funciona com uma grade de dados compartilhada baseada em Knockout. Este modelo renderiza um HREF para cada "página" de dados na grade.

O modelo funciona, mas é klunky porque, se eu buscar muitos dados, acabo com dezenas e dezenas de links de páginas de navegação abaixo da grade. Aqui está o modelo atual:

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

O valor 'currentPageIndex' é apenas um simples ko observável no modelo:

this.currentPageIndex = ko.observable(0);

E 'maxPageIndex' é um computável observável no modelo:

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

Como posso modificar o modelo e o modelo para ativar a interface do usuário de paginação semelhante ao StackOverflow?

Por exemplo:

prev 1 ... 3 4 5 6 7 ... 69 próximo