werden. Diskussion Die DOM Storage APIbesteht aus zwei Schnittstellen: sessionStorage und localStorage . Firefox besitzt dieses Feature seit Version 2.0, als der Standard noch in der Entwicklung war. Seitdem gab es einige Überarbeitungen des Standards. Der Internet Explorer 8.0 enthält eine Implementierung der aktuellen API. Kommende Versionen von Safari und Firefox werden sich ebenfalls nach der aktuellen Spezifikation richten. Aber auch Firefox-Browser der Versionen 2.0 bis 3.0 werden den Speicher einige Zeit halten. Programmiert man eine Anwendung so, dass sie globalStorage unterstützt, dann kann man auch auf diese älteren Browser Rücksicht nehmen.
Eine JavaScript Template Engine nutzen Problem Sie wollen eine JavaScript Template Engine nutzen, um JSON-Daten anzuzeigen. Lösung Dieses Rezept ist eine Bücherliste. Sie holt sich Informationen über ein Buch von einem Skript auf Server-Seite und fügt es einer Liste von Büchern im Browser hinzu. Die Details zum Buch werden vom Server als JSON-String zurückgegeben. Dabei wird die Pure Templating Engine(verfügbar unter http://plugins.jquery.com/project/pure ) genutzt, um die Daten zu formatieren und in die Website einzufügen:
jQuery-Kochbuch - 17.4 Eine Javascript Template Engine nutzen
17.4 - Eine JavaScript Template Engine nutzen
Es gibt zwei Buttons. Einer holt sich die Buch-Details vom Server. Der andere löscht die lokal angezeigte Bücherliste. Diese Liste wird innerhalb eines
-Elements mit der id mit dem Wert book-list angezeigt. Diese Elemente sind sichtbar, wenn die Seite geladen wird:
Das
mit der id mit dem Wert book-template besitzt die Klasse hidden . Dieses
wird nicht angezeigt. Es wird als Template für die Daten genutzt, die vom Server empfangen werden. Die Pure Templating Engine verbindet die Attribute in einer Datenstruktur mit HTML-Elementen, die die gleichen Klassen besitzen. Daher entspricht der Inhalt des Absatzelements mit der Klasse year dem Wert des Attributs year unserer Datenstruktur: { "title": "Democracy and the Post-Totalitarian Experience", "author": [ { "name": "Leszek Koczanowicz" }, { "name": "Beth J. Singer" } ], "year": "2005", "rating": "3", "location": "Mandalay" } Dieser Code ist ein Beispiel für die JSON-Daten, die vom Server zurückgegeben werden. Die Attribute title , year , rating und location besitzen einzelne Werte und lassen sich direkt auf einzelne Elemente im HTML-Template abbilden. Um einen dieser Werte mehr als einmal anzuzeigen, muss man nur die entsprechende Klasse den zusätzlichen Elementen im Template zuweisen. Das Attribut author enthält ein Array mit Objekten. Jedes Objekt besitzt ein einzelnes Attribut name . So lassen sich mehrere Autoren darstellen, mittels derer auch die Iterationsfähigkeiten der Template Engine gezeigt werden sollen. Das Template enthält ein einzelnes List-Element mit der Klasse author . Das List-Element enthält wiederum ein -Element mit der Klasse name . Für Attribute innerhalb der Datenstruktur, die einen Array-Wert besitzen, wird für jedes Element im Array eine Instanz des entsprechenden HTML-Elements erzeugt. So lassen sich beliebig viele List-Elemente erzeugen: (function($) { $('document').ready(function() { $('#add-book').data('id',1); Ist das Dokument bereit, dann wird die jQuery-Funktion data() genutzt, um die aktuelle id des Buches zu speichern, das wir abfragen wollen. Diese id wird jedes Mal erhöht, wenn man die Informationen zu einem Buch abfragen will. Die Funktion data() erlaubt das Speichern beliebiger Daten in DOM-Elementen: $('#add-book').click(function() { var curId = $(this).data('id'); $.getJSON('server.php', {id: +curId},
Kostenlos Online Lesen 
