Mam działający szablon Knockout dla niektórych interfejsów stronicowania, który działa z udostępnioną siatką danych opartą na Knockout. Ten szablon renderuje HREF dla każdej „strony” danych w siatce.

Szablon działa, ale jest nieznośny, ponieważ jeśli ściągam dużo danych, to kończę na dziesiątkach i dziesiątkach linków do stron nawigacyjnych poniżej siatki. Oto aktualny szablon:

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

Wartość „currentPageIndex” jest po prostu prostym ko obserwowalnym w modelu:

this.currentPageIndex = ko.observable(0);

A „maxPageIndex” jest obliczalnym obserwowalnym modelem:

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

Jak mogę zmodyfikować szablon i model, aby włączyć interfejs stronicowania podobny do StackOverflow?

Na przykład:

poprzednia 1 ... 3 4 5 6 7 ... 69 następna