JQuery Kochbuch (German Edition)

Titel: JQuery Kochbuch (German Edition)
Autoren: jQuery Community Experts

Vom Netzwerk:

function(data) {
     if( data.none ) { return false; }
     var divId = 'book-' + curId;
     $('#book-list').append($('#book-template').clone().attr('id',divId));
     $('#'+divId).autoRender(data).removeClass('hidden');
     $('#add-book').data('id', curId + 1);
     });
     return false;
     });
    Wird der Button »Buch hinzufügen« angeklickt, dann erzeugt der Code mit Hilfe der jQuery-Funktion
getJSON()
eine Anfrage an den Server. Der Template-Prozess beginnt mit dem Erzeugen einer Kopie des verborgenen

in unserem HTML-Code. Die
id
dieser Kopie muss geändert werden, bevor sie an die Bücherliste angefügt wird. Wenn man sie nicht ändert, wird ein DOM-Element mit einer nicht-eindeutigen
id
erzeugt. Dann wird die Funktion
autoRender()
aus dem Pure-Plugin mit den JSON-Daten als Argument aufgerufen. Damit wird das Template mit den angegebenen Daten gefüllt. Zum Schluss wird die Klasse
hidden
entfernt und die Buch-Details damit sichtbar gemacht:
$('#clear-list').click(function() {
     $('#add-book').data('id',1);
     $('#book-list').empty();
     return false;
     });
    });
})(jQuery);
    Die Funktion zum Löschen der Bücherliste ist ziemlich einfach. Das entsprechende

-Element wird geleert und der Buchzähler
id
auf 1 zurückgesetzt.
    Diskussion
    Es gibt zwei Vorteile durch die Verwendung einer JavaScript-basierten Templating Engine. Der eine ist die Möglichkeit, eine JSON-Datenstruktur in formatierten und strukturierten HTML-Code umzuwandeln, ohne selbst jedes Element der Datenstruktur anfassen zu müssen. Dazu wendet man eine Templating Engine auf die verschiedenen Datenelemente an, die man im Allgemeinen über Ajax-Aufrufe erhält – wie dieses Beispiel schön zeigt.
    Der zweite Vorteil einer auf JavaScript basierenden Templating Engine ist das Erzeugen reiner HTML-Templates. Diese enthalten keine Bestandteile der Skriptsprache, die normalerweise genutzt werden, um die zu verarbeitenden Daten zu markieren und zum Beispiel Iterationen zu ermöglichen. Es ist schwer, diesen Vorteil nutzen zu können, wenn man die Templating Engine im Browser verwendet. Die negativen Auswirkungen auf die Attraktivität der Site für Suchmaschinen hält die meisten Entwickler von diesem Vorgehen ab. Aber jQuery und die Pure Templating Engine können auch in JavaScript-Umgebungen auf Server-Seite genutzt werden. Jaxer , Rhino und SpiderMonkey sind ebenfalls bekannt Beispiele.

Ajax-Anfragen queuen
    Problem
    Sie brauchen eine bessere Kontrolle über die Reihenfolge der vielen unterschiedlichen Ajax-Anfragen.
    Lösung
    Dieses Rezept stellt zwei verschiedene Wege vor, wie man Ajax-Anfragen queuen kann. Der erste füllt eine Queue mit Anfragen, die dann nacheinander abgesendet werden. Dabei wird die nächste Anfrage immer erst abgeschickt, wenn die Antwort der ersten Anfrage zurückgekommen ist. Der zweite schickt immer eine Gruppe von Anfragen parallel ab. Aber die Callback-Funktionen für jede Anfrage werden immer erst dann ausgeführt, wenn alle Antworten zurückgekommen sind. Zum Vergleich hier ein Beispiel für normale, nicht gequeuete Anfragen:

    jQuery-Kochbuch - 17.5 - Ajax-Anfragen queuen

17.5 - Ajax-Anfragen queuen

    Das jQuery-Plugin ajaxqueue (verfügbar unter http://plugins.jquery.com/project/ajaxqueue/ ) wird genutzt, um das Queueing zu ermöglichen. Drei verschiedene Buttons lösen jeweils eine Gruppe von Ajax-Anfragen aus. In einem Absatz-Element zeigen wir ein Protokoll mit den Antworten an:
(function($) {
    $('document').ready(function() {
     $('#unqueued-requests').click(function() {
     $('#response').empty();
     $.each([1,2,3,4,5,6,7,8,9,10], function() {
     $.get('server.php',{ data: this }, function(data) {
     $('#response').append(data);
     });
     });
     return false;
     });
    Der erste Button löst ganz normale Ajax-Anfragen aus. Es werden zehn Anfragen abgeschickt, wobei jede die Position in der Liste mitschickt. Das Skript
server.php
simuliert einen Server unter Last, indem er eine zufällige Zeitspanne abwartet, bevor er eine Antwort

Vom Netzwerk: