Bringing it all back

Einsatz von Knockout Upshot und Back-Button mit Nav.js
Kommentare

Nachdem im ersten Teil die Funktionsweise von Knockout und Upshot erläutert wurde, soll nun der gemeinsame Einsatz dieser beiden Frameworks zur Entwicklung von Single Page Applications demonstriert werden. Darüber hinaus wird gezeigt, warum der Back-Button in solchen Anwendungen nicht wie vom Benutzer intuitiv erwartet funktioniert und was man dagegen tun kann.

Artikelserie

  1. Moderne Webanwendungen mit Knockout und Upshot
  2. Einsatz von Knockout, Upshot und Back-Button mit Nav.js

Um zu zeigen, wie Knockout und Upshot in Kombination eingesetzt werden können, wird eine erweiterte Variante des im vorangegangen Artikel betrachteten Upshot-Beispiels herangezogen. Diese ist in der Lage, Hotelbuchungen gefiltert nach einem Hotel der Wahl aufzulisten (Abb. 1). Per Klick auf eine Spaltenüberschrift erlaubt sie das Sortieren nach der jeweiligen Spalte. Per Klick auf die Checkbox Eingetroffen kann ein Gast als eingetroffen beziehungsweise nicht eingetroffen markiert werden. Daneben erlaubt die hier betrachtete Implementierung die Aufteilung der anzuzeigenden Daten auf mehrere Seiten (Paging), wobei aus Demonstrationsgründen jede Seite lediglich aus zwei Einträgen besteht.

Abb. 1: Verwalten von Arrays mit Knockout
Abb. 1: Verwalten von Arrays mit Knockout

Hat der Benutzer ein Hotel im Filter ausgewählt, kann er per Klick auf die Schaltfläche Neu angeben, eine neue Hotelbuchung für dieses Hotel erstellen zu wollen. Daraufhin öffnet die Implementierung einen jQuery-UI-basierten Dialog (Abb. 2), in dem die gewünschten Daten erfasst und validiert werden.

Abb. 2: Verwalten von Arrays mit Knockout
Abb. 2: Verwalten von Arrays mit Knockout

Die Konstruktorfunktionen der ViewModels zu dieser Implementierung sind in Listing 1 abgebildet. Hierbei repräsentiert eine HotelBuchung eine einzelne Hotelbuchung und das MainViewModel steht für die gesamte Seite. Letzteres beinhaltet für alle Informationen, die die Darstellung der Seite beeinflussen ein observable beziehungsweise ein observableArray: sortedBy beinhaltet den Namen der Spalte, nach der sortiert werden soll. pageSize, currentPage und pageCount beinhalten die nötigen Informationen zum Paging. hotelFilter beinhaltet die HotelId, nach der gegebenenfalls zu filtern ist, und newHotelBuchung ein gegebenenfalls hinzuzufügendes Hotel. Für alle Aktionen, die die Seite unterstützen soll, bietet das MainViewModel darüber hinaus eine Funktion an. Beispielsweise wird setSortedBy immer dann aufgerufen, wenn nach einer bestimmten Spalte zu sortieren ist. Wird diese Funktion mehrmals hintereinander für dieselbe Spalte aufgerufen, ändert sie die Sortierreihenfolge entsprechend. Die Funktion addNew fügt hingegen eine neue Buchung, die sich in der Eigenschaft newBuchung befindet, zur Liste der anderen Buchungen hinzu und setzt dann newBuchung auf „Buchungsobjekt mit Standardeigenschaften“, sodass diese in weiterer Folge erneut zum Definieren einer neuen Buchung herangezogen werden kann.

Windows Developer

Der Artikel „Bringing it all back“ von Manfred Steyer ist erstmalig erschienen im Windows Developer 8.2012

Die Konstruktorfunktion MainViewModel erzeugt auch eine upshot DataSource. Über getEntities ruft sie ein observableArray, das die abgerufenen Entitäten beinhaltet, ab und weist es der Eigenschaft buchungen zu. Daneben verwendet Sie die Funktion getEntityValidationRules der DataSource, um Informationen zum Validieren von Buchungen zu erhalten. Diese Informationen stammen aus eventuellen Validierungsattributen wie Required oder Range, die der Entwickler serverseitig zu den Eigenschaften der Entität zuweist. Die auf diesem Weg ermittelten Validierungsinformationen veröffentlicht die betrachtete Funktion über die Eigenschaft validationConfig. Daneben verknüpft sie dieses Objekt mit der zuvor besprochenen Funktion addNew, sodass Upshot diese nach einer erfolgreichen Validierung aufruft.

Beachtenswert ist auch der Aufruf von ko.computed. Normalerweise erzeugt diese Knockout-Funktion ein Observable, das sich aus den Werten anderer Observables berechnet und somit immer dann, wenn sich eines dieser Observables ändert, entsprechend zu aktualisieren ist. Im betrachteten Fall wird das damit erzeugte, berechnete Observable jedoch zu keiner Eigenschaft zugewiesen. Trotzdem wird die übergebene Funktion immer dann aufgerufen, wenn sich eines der davon verwendeten Observables ändert. Somit missbraucht das hier gezeigte Beispiel die Funktion computed zum Erzeugen einer Ereignisbehandlungsroutine, die immer dann aufgerufen wird, wenn sich einer der davon verwendeten Observables ändert. Diese Funktion aktualisiert die DataSource um die Angaben zum Sortieren, Filtern und Paging.

Listing 1





 
  
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -