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

<p>Kleiner Untertitel des Gerichtes Nummer 1</p>
</a>
</li>
Prinzipiell wird Sie dieser Weg zum Ziel führen, jedoch schaffen Sie sich dadurch
unnötig Arbeit. Nehmen Sie an, Herr Mattisen expandiert und seine Gerichteliste
steigt von fünf auf über 20 Gerichte an. Sie müssten nun für jede Detailansicht eines
Gerichts eine separate HTML-Datei anlegen. Und das Schlimmste: Im Endeffekt
sehen diese Dateien so gut wie gleich aus. Lediglich die Bildadresse, der Titel und der
Untertitel verändern sich. Das klingt nach einer Menge überflüssigem Code. Sie sind
zum Glück nicht nur etwas faul, sondern vor allem smart, weswegen Sie die Daten
(Bildadresse, Titel, Untertitel) der Gerichte in eine externe Datei auslagern und dann
mit etwas jQuery in die Seite einfügen. Die externe Datei ist quasi Ihre Datenbank. Sie
haben schon in den vorherigen Kapiteln mit JSON gearbeitet, weswegen Sie auch
beim »heiteren Hering« die Daten in einer JSON-Datei speichern. Erstellen Sie eine
neue Datei namens gerichte.json , und speichern Sie diese im Verzeichnis Ihrer
WebApp ab. Diese Datei beinhaltet ein Objekt gerichte , welches wiederum aus den
einzelnen Gerichten und deren Eigenschaften besteht.
{
"gerichte": [
{
"name": "Heiterer Hering",
"bild": "gericht1.png",
"untertitel": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur pulvinar rhoncus malesuada."
},
{
"name": "Fröhliche Forelle",
"bild": "gericht2.png",
"untertitel": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur pulvinar rhoncus malesuada."
},
{
"name": "Buckeliger Barsch",
"bild": "gericht3.png",
"untertitel": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur pulvinar rhoncus malesuada."
},
{
"name": "Feuerroter Rotbarsch",
"bild": "gericht4.png",