JQuery Kochbuch (German Edition)

Titel: JQuery Kochbuch (German Edition) Kostenlos Bücher Online Lesen
Autoren: jQuery Community Experts

Vom Netzwerk:

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