DOM-Manipulation mittels Vorlagen

Bei der Verwendung der sog. AJAX-Techik auf Web-Seiten geht es unter anderem darum, beim Laden einer Seite nicht bereits alle benötigten Daten zum Browser zu transportieren, sondern Teile der Seite erst auf Anforderung, als zum Beispiel durch den Klick des Benutzers auf einen Button, über Javascript-Code nachzuladen.

Ein besonders guter Helfer für den Entwickler der Seite ist dabei jQuery, das einige sehr effiziente Methoden bietet, Daten auf diese Art und Weise vom Web-Server zu holen. Was aber passiert damit? Die aktuelle Seite wird mit den Daten angereichert, das heißt, in den aktuellen HTML-Code werden die zusätzlichen Informationen injiziert. Ein Bespiel dafür:

function injectComments() {
    //JSON-Daten vom Server holen
    $.getJSON("getcomments.ashx", function(json){
        if (json != undefined) {

            //Datensätze durchlaufen und DIV-Elemente erzeugen
            $.each(json.rows, function(i,item) {
                $("#Result").append(
                    "<div class=\"row\">" + item.Comment + "</div>");
            }

        }
    });
}

jQuery wird hier angewiesen, Kommentardaten im JSON-Format von der Url getcomments.ashx abzuholen und die einzelnen Datensätze dann der Reihe nach in DIV-Elemente zu packen und an das HTML-Element Result anzuhängen.

So weit so gut. Nun ist aber die Struktur der zu erzeugenden DIV's in diesem Beispiel recht simpel, das heißt es ist durchaus vertretbar die "Vorlage", in die die eigentlichen Daten eingefügt werden, direkt im Code zu deklarieren. Was aber, wenn diese Vorlage wesentlich komplexer ist? Bei einer solchen Javascript-String-Verkettung geht da sehr schnell der Überblick verloren und der Code wird unwartbar.

Wesentlich besser geeignet für solche Zwecke ist das jQuery-Plugin jTemplates, mit dem man die Vorlage in einer extra Datei unterbringen kann. jQuery und jTemplates kümmern sich dann um Zusammenführung der Daten.

Neben Platzhaltern für die Datenfelder kann man bei der Definition einer solchen Vorlage auch mit Kontrollstrukturen wie if und foreach arbeiten. Weiterhin bietet jTemplate unter anderem auch die Verteilung von Vorlagen auf mehrere Dateien mittels des include-Statements und die Parametrisierung der zu verarbeitenden Daten über param.

Vorlage für das Beispiel von oben:

{#foreach $T.rows as record}
<div class="row">
    ($T.record.Comment}
</div>
{#/for}

Der Javascript-Code wird nun wesentlich übersichtlicher:

function injectComments() {
    //JSON-Daten vom Server holen
    $.getJSON("getcomments.ashx", function(json){
        if (json != undefined) {

            //Daten an Template hängen
            $("#Result").setTemplateURL("templates/comments.htm");
            $("#Result").processTemplate(json);

        }
    });
}

Die erste Zeile lädt die Vorlage vom Server und die zweite stößt die Verarbeitung der zuvor geladenen JSON-Daten an.

Der Funktionsumfang von jTemplate ist überschaubar, aber es läßt sich sehr intuitiv und effizient einsetzen. Sind Änderungen an der HTML-Struktur notwendig, muss man sich nicht mit dem Javascript-Code auseinandersetzen, sondern passt schlicht die Vorlage an die neuen Bedürfnisse an. Ich finde ein sehr gelungenes Tool.