Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

HTML5: Erste Schritte mit dem Template-Tag

Mit dem HTML5-Template-Tag steht Webworkern schon bald ein einheitliches Werkzeug für die Implementierung von clientseitigen Templates zur Verfügung. Wir stellen euch das Template-Tag kurz vor.

Das Verarbeiten der Templates ist normalerweise dem Server vorbehalten. In einigen Einsatzszenarien kann es jedoch Sinn machen, Templates auf den Client auszulagern. Web-Apps mit sich wiederholenden Elementen müssten beispielsweise nicht mehr bei jedem Aufruf der Seite die komplette Struktur vom Server beziehen und benötigen nur noch Datensätze aus einer XML-Datei oder einem JSON-String. Besonders unterwegs, mit schwankender Bandbreite, ein klarer Vorteil.

HTML5 und klassisches Client-Side-Templating

HTML5_sticker

Die meisten Ansätze von Client-Side-Templating sind eher als Workarounds zu bezeichnen. Templates direkt in den JavaScript-Code zu integrieren führt zwangsläufig dazu, dass die Wartbarkeit und Größe des Codes stark darunter leiden. Das Nachladen von Template-Dateien via AJAX-Request produziert unnötigen Overhead-Traffic und das Einbinden von Templates über das Script-Tag ist ebenfalls keine saubere Lösung.

Mit dem HTML5-Template-Tag wird das jetzt geändert. Elemente, die im Template-Tag sind, werden nicht angezeigt und zählen nicht als Teil des Dokumentes, sodass der Zugriff auf die Inhalte des Templates über document.getElementBy-Funktionen nicht möglich sein wird. Auch sind sie inaktiv, solange sie nicht eingesetzt werden, sodass Bilder nicht geladen, Scripte nicht ausgeführt und Mediendateien nicht wiedergegeben werden.

Der nachfolgende Code zeigt eine beispielhafte Implementierung:

<template id="simple_text">
<p>Das ist mein Template Inhalt.</p>
</template>

<div id="target"> <p>Das ist normaler Inhalt.</p> </div>

<script> var example = document.getElementById('simple_text'), target = document.getElementById('target'); target.appendChild(example.content.cloneNode(true)); </script>

HTML5-Template-Tag im Hinterkopf behalten

Derzeit wird das HTML5-Template-Tag nicht von allen Browsern unterstützt. Die aktuelle Version von Chrome und Firefox Nightly können jedoch schon damit umgehen. Andere Browser geben den Tag einfach aus, sodass ihr bei eueren Experimenten sicherstellen solltet, dass es im Stylesheet auf display:none gestellt wird. Insgesamt ist das HTML5-Template-Tag aber ein gute Idee und ein weiterer Schritt zur Vereinheitlichung von Entwicklungsstandards, den man auf jeden Fall auf dem Schirm haben sollte.

Weiterführende Links

Bitte beachte unsere Community-Richtlinien

4 Reaktionen
Phil

Ja, jetzt ist es klar!
Besten Dank für die Aufklärung :)

Antworten
Ilja Zaglov

Das Template selbst ist zwar über getElementBy erreichbar, die Implementation sieht jedoch vor, dass alle Elemente innehralb des Templates nicht über diese Methode verfügbar sind.

Das ist mein Template Inhalt.

In diesem Beispiel kommt man zwar an den Inhalt des Templates mit #simple_text, aber nicht an p#test.

Hoffe, es ist jetzt klarer?

Antworten
PI

@Phil: Ilja schreibt, dass es sich um die Elemente IM Template-Tag handelt. In seinem Beispiel spricht er aber den Tag selbst an und nicht dessen Inhalte. So zumindest meine Vermutung...

Antworten
Phil

Verstehe die Erklärung irgendwie nicht:

"Elemente, die im Template-Tag sind, werden nicht angezeigt und zählen nicht als Teil des Dokumentes, sodass der Zugriff auf die Inhalte des Templates über document.getElementBy-Funktionen nicht möglich sein wird."

Und im Beispielcode wird das Template bzw. der Inhalt des Templates dann via document.getElementBy ausgelesen.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.