Bringing it all back

Einsatz von Knockout Upshot und Back-Button mit Nav.js (Teil 3)
Kommentare

Den Back-Button mit Nav.js wiederbeleben
Ajax-basierte Anwendungen weisen häufig mehr logische als physische Seiten auf. Diese Beobachtung gilt ganz besonders für Single Page Applications, da es hier

Den Back-Button mit Nav.js wiederbeleben

Ajax-basierte Anwendungen weisen häufig mehr logische als physische Seiten auf. Diese Beobachtung gilt ganz besonders für Single Page Applications, da es hier lediglich eine einzige physische Seite gibt, die alle logischen Seiten der Anwendung beinhaltet. Das führt dazu, dass der Back-Button nicht wie vom Benutzer intuitiv erwartet, funktioniert, da der Browser keine Kenntnis über logische Seiten hat. Als Lösung für dieses Problem beinhaltet ASP.NET SPA eine schlanke JavaScript-Implementierung mit dem Namen Nav.js. Diese stützt sich, sofern vorhanden, auf das HTML5 History API ab. Wird es vom aktuellen Browser nicht angeboten, kommt eine Ausweichlösung zum Einsatz.

Windows Developer

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

Um mit Nav.js das eingangs geschilderte Problem zu lösen, gibt der Entwickler immer dann, wenn ein Zustand eintritt, zu dem man zurückkehren können soll, Informationen zu diesem Zustand in Form eines JavaScript-Objekts an. Mit diesen Objekten baut das API einen Stack auf. Immer dann, wenn der Back-Button betätigt wird, wird das letzte Zustandsobjekt von diesem Stack geholt und an eine Ereignisbehandlungsroutine übergeben. Innerhalb dieser kann der Entwickler Code platzieren, der unter Verwendung dieses Objekts den beschriebenen Zustand wiederherstellt.
Listing 4 zeigt ein ViewModel, das sich auf Nav.js abstützt. Die beiden Funktionen toPage1 und toPage2 erzeugen ein neues Zustandsobjekt, das den aktuellen Zustand widerspiegelt, und übergeben dieses an Nav.js. Dabei handelt es sich um Zustandsobjekte, die angeben, dass derzeit entweder die Seite page1 oder page2 aktiv ist. Wichtig ist hierbei, dass die Struktur dieser Objekte nicht vordefiniert ist. Bei page handelt es sich somit um eine vom Entwickler frei gewählte Eigenschaft.

Im Initialisierungsbereich wird die von den beiden Funktionen verwendete nav-Eigenschaft unter Verwendung der Konstruktorfunktion NavHistory erzeugt. Im Zuge dessen wird ein Zustandsobjekt, das den Initialzustand beschreibt, übergeben. Dieses legt fest, dass page1 die zuerst anzuzeigende Seite ist. An die betrachtete Konstruktorfunktion wird auch eine Ereignisbehandlungsroutine übergeben. Diese wird immer dann aufgerufen, wenn durch Verwendung des Back-Buttons zu einem früheren Zustand zurückgekehrt werden soll. Dabei übergibt Nav.js das jeweilige Zustandsobjekt als Argument. Im betrachteten Beispiel ist diese Funktion leer, zumal die Wiederherstellung von Zuständen lediglich über Knockout erfolgt. Bei komplexeren Szenarien ist der Entwickler jedoch gut beraten, von dieser Routine Gebrauch zu machen.

Listing 4










  

Die zum soeben betrachteten ViewModel gehörige View befindet sich in Listing 5. Sie stützt sich auf jQuery Mobile [1] ab, was an den einzelnen data-Attributen wie data-role, die die einzelnen Seitenbereiche (header, content, footer) auszeichnen, erkennbar ist. Für die Betrachtung der Funktionsweise von Nav.js ist diese Erkenntnis jedoch zweitrangig. Je nachdem, welchen Wert die Eigenschaft view des aktuellen Zustandsobjekts hat, wird entweder das div-Tag für Seite 1 oder Seite 2 eingeblendet. Hierzu verwendet die betrachtete Implementierung das von Knockout bereitgestellte if Binding.

Mit den Verweisen im Fußbereich der Seite kann zwischen den beiden Seiten gewechselt werden. Sie sind dazu an die Funktionen toPage1 beziehungsweise toPage2 im ViewModel gebunden. Darüber hinaus kommt ein css Binding zum Einsatz. Dieses legt fest, dass der Verweis zu jener Seite, die gerade aktiv ist, hervorgehoben darzustellen ist. Dazu weist das css Binding die Klasse ui-btn-active zum jeweiligen Verweis zu.

Beim Testen von Anwendungen dieser Art, die sich auf die aktuelle Beta abstützen, ist man gut beraten, die einzelnen Seiten mit mindestens einem URL-Parameter oder zumindest mit einem angehängtem Fragezeichen (zum Beispiel x/y/z?, anstatt x/y/z) aufzurufen. Damit wird ein Bug in einem HTML4-Browser wie IE 9 umgangen, der hoffentlich in der finalen Version beseitigt sein dürfte.

Listing 5

nav.js Demo

Seite 1
Seite 2
Fazit

Die Technologien, die ab ASP.NET MVC 4 kurzerhand unter dem Begriff „SPA“ zusammengefasst werden, erleichtern die Entwicklung moderner, JavaScript-basierter Anwendungen, die bei Bedarf – ähnlich wie Silverlight- oder Flash-Anwendungen – Daten vom Server nachladen, erheblich. Dank Neuerungen, die mit HTML5 assoziiert werden, wie zum Beispiel dem HTML5 Application Cache oder Local Storage, können damit offlinefähige Anwendungen, die auf sämtlichen mobilen sowie klassischen Anwendungen zur Ausführung gebracht werden können, entwickelt werden. In vielen Fällen stellen solche Anwendungen sogar eine attraktive Alternative zu nativen, mobilen Anwendungen dar, zumal sich der Entwickler dazu zum einen nicht in die Vielzahl an nativen Sprachen, wie zum Beispiel Objective-C, einarbeiten muss und zum anderen eine Bereitstellung über die einzelnen Stores, die bestimmte Auflagen mit sich bringen, umgehen kann.

Manfred Steyer (softwarearchitekt.at) ist freiberuflicher Trainer und Berater bei IT-Visions (it-visions.de) sowie Leiter des in Deutschland und Österreich stattfindenden berufsbegleitenden Master-Studiengangs Software Engineering Leadership der FH CAMPUS 02 (campus02.at). Er spricht regelmäßig auf Fachkonferenzen und schreibt für Microsoft Press und Hansa. Derzeit schreibt er gemeinsam mit Dr. Holger Schwichtenberg bei Microsoft Press über „Moderne Webanwendungen“ mit ASP.NET MVC und JavaScript APIs.
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -