Templating mit jQuery

Die von Microsoft (Jehova!) gesponserte Template-Engine für jQuery ist endlich da. Den meisten wird sich an dieser Stelle die Frage stellen, was man im Javascript wohl mit einem Template anfangen will, aber die Antwort ist ziemlich einfach: Wenn man mit jQuery einen Webservice direkt anspricht und dessen Antwort als HTML auf einer Seite ausgeben will, ist dies in der Vergangenheit in einer regelrechten String-Ausgabe-Hölle geendet. Mit der Template-Engine kann ich zum Beispiel wie mit Smarty in PHP ein Template definieren, dass dann benutzt wird, um das Ergebnis eines JSON-Calls auszugeben.

Ein entsprechendes Tutorial hat nettuts zur Verfügung gestellt. Das Template ist dabei recht intuitiv gehalten:

<script id="tweets" type="text/x-jquery-tmpl">
	<li>
 
		<h2> ${username} </h2>
		<p> ${tweet} </p>
		{{if geo}}
		<span> ${geo} </span>
		{{/if}}
	</li>
</script>

Den entsprechenden Aufruf des Ajax-Webservice sollte klar sein, in der success-function werden lediglich die Variablen für das Template zugewiesen. Was bei nettuts nicht ganz klar wird, ist das die Template-Engine das Template nimmt, und in eine bereits bestehende HTML-Struktur nachträglich einfügt. Das Template muss zwar in der Seite stehen, wird aber an der Stelle, wo es eingefügt ist, nicht angezeigt. Ferner ist es etwas unglücklich das dort das Template und das HTML fast die gleiche IDs verwendet worden sind.

Entsprechend erklärt sich die folgende Verbindung zwischen Template und Code:

$('#tweets').tmpl(twitter).appendTo('#twitter');

Das #tweets bezieht sich auf das Template, nicht auf die HTML-Struktur! Das Template wird dann auf das Array twitter angewendet, das von dem JSON-Calls zur Verfügung gestellt wird. Das each hat man sich an dieser Stelle gespart, das Template wird automatisch 1..n angewendet. Zu guter Letzt kommt mittels appendTo der HTML-Container, in, dass das Template eingefügt werden soll.

Alles in allem ein sehr einfacher und intuitiver Konstrukt, wenn man es erst einmal durchschaut hat:

1)      ID des Templates

2)      Name des Arrays das 1..n angewendet wird

3)      ID des HTML-Containers, in dass das Template eingefügt werden soll

Denkt dran, dass ihr auch den Fall abfangen müsst, dass der JSON-Calls keine Daten liefert.

Ähnliche Beiträge

Hobbytronic 2010 – Hobbytronic 2.0 Tja, ich habe ja letztes Jahr schon drüber geschrieben, das die Hobbytronic in 2009 abgesagt worden ist. Mit ganzen Schulbussen sind wir damals nach D...
Onlinespiele mit HTML5 Wer den Blog eifrig verfolgt wird wissen, das ich der festen Überzeugung bin, dass HTML5 Flash ablösen wird. Ein großes Betätigungsfeld von Flash ist ...
Adios FeedBurner, willkommen FeedBlitz Ich hoffe ich kann euch während dieses Artikels den einen oder anderen Kraftausdruck in Richtung FeedBurner ersparen, ich denke aber nicht! ;) Sagen w...
Webworking Fragen & Antworten ? Nachdem gestern netterweise Santa Claus meinen letzten Post kommentiert hat ( ihr seid ja sooo lustig ;) stellt sich mir durchaus die Frage, wann ich ...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.