Knockout-Vorlage-erstellen der Paginierung UI / links ähnlich wie StackOverflow

Habe ich wieder eine funktionierende Knockout-Vorlage-für einige Paginierung UI, das funktioniert mit einem Knockout-basiertes shared-data-grid. Diese Vorlage macht ein HREF " für jede "Seite" der Daten im Netz.

Den Vorlage arbeiten, aber es ist klunky, denn wenn ich Sie Holen eine Menge von Daten, dann habe ich am Ende mit Dutzende und Dutzende von Navigations-Seite links unterhalb des Gitters. Hier ist die aktuelle Vorlage:

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

Den 'currentPageIndex' Wert ist nur ein einfaches ko beobachtbare in das Modell:

this.currentPageIndex = ko.observable(0);

Und 'maxPageIndex' ist eine berechnete beobachtbare in das Modell:

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

Wie kann ich ändern Sie die Vorlage und Modell zum aktivieren von paging-UI ähnlich wie StackOverflow?

Beispiel:

zurück 1 ... 3 4 5 6 7 ... 69 nächsten

InformationsquelleAutor Armchair Bronco | 2012-08-21

19

Genau dies ist die pager-Stil habe ich mit für eine Weile jetzt.

Ich gerade fertig mit dem extrahieren der pager-Funktionalität, die ich auf mehreren Projekten, die in eine Verlängerung zu knockout und die Vorlage durch ein Beispiel.

Sehen https://github.com/remcoros/ko.pager für die Quell-und http://remcoros.github.com/ko.pager/example.html für ein Beispiel.

Alle Berechnungen und einige praktische Eigenschaften werden zur Verfügung gestellt von der 'Pager' - Klasse, die Sie erstellen und binden. Aber ein Beispiel working-Vorlage enthalten ist.

Finden Sie in der Quelle example.html für die Nutzung.
- Dieser fiel von der radar für mich. Ich landete Rollen, meine eigene, sehr einfache Implementierung, die ähnlich dieser version aber ohne den ganzen bling-bling-coolness. Ich mag, was ich hier sehe, so werde ich dies akzeptieren, da die Antwort auch wenn es nicht die Lösung die ich verwendet habe. Wenn ich Zeit habe, werde ich versuchen, rip-aus meinem code, und ersetzen Sie es mit diesem code. Danke!
InformationsquelleAutor Remco Ros

Erste, was ich tun würde schauen, ob es irgendwelche benutzerdefinierte Bindungen oder Bibliotheken gibt, die dies tun. Wenn es gibt, erstellen Sie eine benutzerdefinierte Bindung, die verwendet diese Bibliothek.

Back-up-plan - machen Sie Ihre eigenen benutzerdefinierten verbindlich.
Ich würde sowas machen wie:

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

Dann in meinem custom Bindung, etwas wie das hier tun:

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

InformationsquelleAutor Richard Rout

1

Ich bin so schön, also machte ich ein für Sie in genau zwei Minuten 😛 (So muss es wohl bugs)
Die basiert auf der ersten pager-ich fand, das war, jQuery Paginierung

http://jsfiddle.net/tymTz/2/
- Blick auf das jetzt und versuchen, um die Nachrüstung für mein eigenes Netz. Sieht toll aus in jsfiddle. Vielen Dank im Voraus. Ich werde Bericht zurück, wenn die Haartransplantation abgeschlossen ist.
- Vergessen Sie nicht, markieren Sie als Antwort 😉
- Ich werde, aber ich möchte, um zu überprüfen, Erstens, dass ich tatsächlich in der Lage, um die Konvertierung zu tun. Mein Erster Versuch ist fehlgeschlagen, da ich mehrere KO-Daten-Modellen auf der gleichen Seite und verwende die folgende syntax, um Draht-Dinge: ko.applyBindings(myViewModel, $bindingTarget.get(0));
- noch nie gesehen, dass die Art der Nutzung applyBindings, argument zwei sollte ein DOM-element
- Das 2. argument wird in einen DOM-element (unter der Annahme, dass $bindingTarget ist ein gültiges jQuery-Objekt). Zum Beispiel: var $bindingTarget = $("#idMyBindingTarget"); Wenn ich dann verwenden: $bindingTarget.get(0) mit ko.applyBindings(...), kann ich die Feinabstimmung, welche Elemente beteiligen sich in Knockout-s "data-bind" - Welt. Ich meinem Fall habe ich eine single-page-web-Anwendung mit buchstäblich Dutzende von verschiedenen bindenden Regionen. Wie auch immer, ich werde sicher sein, um das zu markieren, wie die Antwort, sobald meine op ist fertig! 🙂
- Ich landete akzeptieren der Antwort unten, wie es ist ein sehr Poliert Lösung (wenn auch eine, die gesendet wurde, mehrere Monate nach dieser Antwort).
InformationsquelleAutor Anders

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.