201108Mär

jQuery Template Plugin: HTML-Content per Skript

Ein tieferer Blick in die jQuery-API lohnt sich immer wieder, da sich dort auch bestimmte Funktionen und Plugins finden, die neu eingeführt wurden und weniger bekannt sind. Ein interessantes Plugin stellt so auch das jQuery Template-Plugin dar, mit dem sich aus JavaScript-Templates entsprechende HTML-Konstrukte generieren lassen. Ein ähnliches Projekt stellt Mustache dar, das kein JavaScript-Framework benötigt und für verschiedene Sprachen existiert.
Das jQuery Template-Plugin, das mittels "jQuery.tmpl()" aufgerufen wird, nimmt Daten als Array und ein Template in Form eines HTML-Bausteins entgegen. Zudem können Funktionen als Template-Objekt übergeben werden, wodurch sich auch dynamische Konstrukte erstellen lassen.

jQuery API - Templates

In der API-Dokumentation finden sich etliche Beispiele für den Einsatz des Template-Plugins. Ein einfaches Skript, durch das sich die Funktionsweise beleuchten lässt:

  • <script type="text/javascript">
  • var movies = [
  • { Name: "The Red Violin", ReleaseYear: "1998" },
  • { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
  • { Name: "The Inheritance", ReleaseYear: "1976" }
  • ];
  •  
  • var markup = "<li>${Name} (${ReleaseYear})</li>";
  • $.template("movieTemplate", markup);
  • $.tmpl("movieTemplate", movies)
  • .appendTo("#movieList");
  • </script>
  •  
  • <ul id="movieList"></ul>

Mit dem Plugin lassen sich Templates zudem aus Ajax-Daten erstellen. Eine Übersicht der Template-Syntax findet sich hier. Das Skript steht zum Download bei GitHub bereit.

Kommentare

Webdesigner schrieb am 10.03.2011 #1

nicht gut für Suchmaschinen! Ajax funktioniert auch sehr gut mit DIV#id.

Matthias schrieb am 12.03.2011 #2

Bezüglich der Suchmaschinenoptimierung ist es durchaus nicht zu empfehlen. Aber ich denke, dass solche Template-Engines in erster Linie für Offline-Anwendungen und interne Tools nützlich sein können, wo es nicht auf die Suchmaschinen ankommt ;-)