templates - template - knockoutjs variables

Plantilla Knockout para crear una interfaz de usuario/enlaces de paginación similar a StackOverflow

Question

Tengo una plantilla knockout que funciona para alguna interfaz de usuario 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 grilla.

La plantilla funciona, pero es klunky porque si obtengo una gran cantidad de datos, entonces termino con docenas y docenas de enlaces a páginas de navegación debajo de la grilla. 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 simplemente un simple ko observable en el modelo:

this.currentPageIndex = ko.observable(0);

Y ''maxPageIndex'' es un observable calculado 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:

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

Answer 1

Este es exactamente el estilo de buscapersonas que he estado usando desde hace un tiempo.

Acabo de terminar de extraer la funcionalidad de buscapersonas que utilicé en varios proyectos, en una extensión para nocaut y plantilla por ejemplo.

Consulte https://github.com/remcoros/ko.pager para la fuente y http://remcoros.github.com/ko.pager/example.html para obtener un ejemplo de trabajo.

Todos los cálculos y algunas propiedades convenientes son proporcionados por la clase ''Localizador'', que puede crear y vincular. Pero se incluye una plantilla de trabajo de ejemplo.

Vea la fuente example.html para el uso.

Answer 2

Lo primero que haría es ver si hay enlaces o bibliotecas personalizadas que hagan esto. Si los hay, cree un enlace personalizado que use esa biblioteca.

Plan de copia de seguridad: crea tu propio enlace personalizado. Haría algo como:

<div data-bind="pagination: { maxIndex: maxPageIndex(), numToShow: 7 }">
...
</div>

Luego, en mi enlace personalizado, haz algo como esto:

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

Answer 3

Soy muy amable, así que hice uno para ti en exactamente dos minutos: P (Entonces probablemente tiene errores) Se basa en el primer busca que encontré que era jQuery pagination

http://jsfiddle.net/tymTz/2/