HTML5 template-Tag

Template-Technologien für’s Backend gibt es zuhauf (Smarty, Template-Toolkit,…), aber seit dem im Frontend immer mehr dynamisch an Code erstellt wird hat sich auch dort die Notwendigkeit für Template-Techniken ergeben. Da die Frontend-Script-Sprache Nummer 1 nun mal JavaScript ist lag es nahe, dass auch die Templates in JavaScript verwaltet werden, so entstanden beispielsweise Template-Systeme wie „mustache.js„.
Als Frontend-Entwickler möchte man allerdings eigentlich nicht Scripts und Markup vermischen. Haben wir es die letzten Jahre nun endlich hinbekommen, dass Markup, Scripts und Layout sauber getrennt sind würden Frontend-Templates in JavaScript das ganze wieder zunichte machen. Doch das Allzweck-Buzzword HTML5 hat da etwas in der Pipeline: das <template>-Tag.

Das ganze ist denkbar einfach. Man schreibt sein Template-Gerüst einfach in ein <template>-Tag, das DOM ist getrennt gehalten vom DOM des eigentlichen Dokuments, sodass der Inhalt nicht gerendert, keine Styles angewendet und keine Scripts ausgeführt werden.

<template id="tmpl_comment">
  <li>
    <img src="/path/to/comment_dummy.png" alt="" />
    <p></p>
    <time datetime=""></time>
  </li>
</template>

Mittels einfachem JavaScript kann man sich nun bei Bedarf den Inhalt des <template>-Tags kopieren, das Markup mit sinnvollen Inhalten füllen und ins DOM des Dokuments einfügen.

Veröffentlicht von

Hilko

2006 machte ich mein Hobby zum Beruf, startete mit einer Ausbildung zum Mediengestalter und arbeite inzwischen in Hannover als Frontend Web-Developer. Neben der Leidenschaft für semantisches Markup und den Möglichkeiten der aktuellen Frontend-Techniken, interessiere ich mich für das Reisen, fremde Kulturen und die Kunst der Fotografie.

Schreibe einen Kommentar

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