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 HTML5Template-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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

4 Kommentare
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
PI
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
Ilja Zaglov
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
Phil

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

Antworten

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

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung