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

auf das ursprüngliche $(document).ready nicht verlassen können. Stellen Sie sich vor,
die Startseite würde geladen. Im Zuge dessen würde jeder Code ausgeführt werden,
der innerhalb $(document).ready definiert ist. Wenn Sie nun die Rubrik wechselten
und wieder zur Startseite zurückkehrten, würde aber die Startseite nicht erneut kom-
plett nachgeladen. Das Ergebnis wäre, dass die Funktion nicht mehr ausgeführt und
damit die Seite fehlerhaft dargestellt würde. In jQuery Mobile müssen Sie somit eine
andere Funktion definieren, die Code ausführt, wenn die jeweilige Seite angezeigt
(und nicht geladen) wird.
$('#NameDerSeite').on("pageshow", function() {
// Alles, was hier steht, wird ausgeführt, wenn die Seite angezeigt wird.
});
Zunächst sprechen Sie die id der jeweiligen Seite an, um dann mit .on("pageshow",
function () {}); zu überprüfen, ob die Seite angezeigt wird. Ist dies der Fall, so wird
der Code innerhalb der geschweiften Klammern ausgeführt. Dies ist genau das, was
Sie in Ihrem Fall benötigen.
Sie werden nun innerhalb dieser Funktion folgende Dinge ausführen:
1. Den momentanen Inhalt der Gerichteliste leeren, damit es beim erneuten Aufruf
nicht zu Dopplungen kommt.
2. Die JSON-Datei laden, alle Gerichte durchgehen und die Inhalte in der Gerichte-
liste ausgeben.
3. Die Liste durch jQuery Mobile gestalten lassen.
<script>
$('#menue').on("pageshow", function() {
$('#gerichteliste').empty();
$.getJSON('gerichte.json', function(data) {
$.each(data.gerichte, function(i,item){
$('<li><a href="gericht-detail.html" data-transition="slide" onClick=
"javascript:sessionStorage.gericht=\''+item.name+'\';"><img src="bilder/
'+item.bild+'" /><h3>' + item.name + '</h3>' + '<p>' + item.untertitel +
'</p></a></li>').appendTo('#gerichteliste');
});
$('#gerichteliste').listview('refresh');
});
});
</script>
Listing 8.12 Die JSON-Datei auslesen und die als Gerichteliste ausgeben
Sie sehen nun auch, warum es wichtig ist, jedem page -Container seine eindeutige id
zuzuweisen. Nur so können Sie mit jQuery überprüfen, ob die Seite geladen wurde.