Tengo una plantilla Knockout en funcionamiento para alguna UI de paginación que funciona con una cuadrícula de datos compartidos basada en Knockout. Esta plantilla representa un HREF para cada "página" de datos en la cuadrícula.

La plantilla funciona pero es klunky porque si obtengo una gran cantidad de datos, termino con docenas y docenas de enlaces de páginas de navegación debajo de la cuadrícula. Aquí está la plantilla actual:

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

El valor 'currentPageIndex' es solo un ko simple observable en el modelo:

this.currentPageIndex = ko.observable(0);

Y 'maxPageIndex' es un observable computado en el modelo:

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

¿Cómo puedo modificar la plantilla y el modelo para habilitar la interfaz de usuario de paginación similar a StackOverflow?

Por ejemplo:

anterior 1 ... 3 4 5 6 7 ... 69 siguiente