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.