WebApps mit Frameworks entwickeln - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 309

"untertitel": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur pulvinar rhoncus malesuada."
},
{
"name": "Deftige Dorade",
"bild": "gericht5.png",
"untertitel": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur pulvinar rhoncus malesuada."
}
]
}

8

Listing 8.11 Die JSON-Datei mit den Gericht- und Bildinformationen

Vorsicht - Syntaxfalle!
Achten Sie genau auf die korrekte Syntax in der JSON-Datei. Ein Komma, ein Anfüh-
rungszeichen oder eine Klammer zu viel oder zu wenig und die Ausgabe wird nicht
funktionieren. Schlimmer noch: Sie werden nicht mal eine Fehlermeldung erhalten.
Erinnern Sie sich noch an JSON Lint ( http://jsonlint.com/ )?

Diese JSON-Datei beinhaltet somit alle notwendigen Informationen jedes Gerichts.

Die JSON-Datei auslesen und ausgeben

Nachdem Sie nun die Daten in eine externe Datei ausgelagert haben, kümmern Sie
sich um die Ausgabe in der WebApp. Dazu benötigen Sie etwas JavaScript-Code, wel-
chen Sie am Ende innerhalb des page -Containers einfügen. Wieso innerhalb des page -
Containers? Sie erinnern sich bestimmt: jQuery Mobile lädt bei einem Seitenwechsel
nur den Inhalt des page -Containers, nicht aber die komplette HTML-Datei. Stünde der
Code außerhalb des page -Containers, so würde dieser nicht nachgeladen werden und
damit die Ausgabe nicht funktionieren.

Eines der ersten Dinge, die Sie im Zuge von jQuery gelernt haben, ist das Ausführen
von Code über $(document).ready , wenn die Seite fertig geladen ist:

$(document).ready(function() {
// Alles, was hier steht, wird ausgeführt, wenn die Seite fertig geladen
ist.
});

Leider funktioniert dies innerhalb einer jQuery-Mobile-WebApp nur bedingt. Häufig
werden nur Teile von Seiten nachgeladen (oder sogar vorgeladen), weswegen Sie sich