HTML-Template-Tag und cloneNode

Wer PHP programmiert, kennt Template-Systeme wie Smarty oder Twigg: Templates sind Vorlagen aus HTML für den wiederholten Einsatz. Mehr oder minder alle Programmiersprachen arbeiten mit Template-Systemen.

Templates sind z.B. für Wiederholungen wie Zeilen einer Tabelle, Listenelemente und Bilder einer Slideshow gedacht.

Javascript hat von Haus aus kein Template-System im Angebot. HTML-Elemente werden aufwändig mit createElement erzeugt und zu einem Fragment zusammengesetzt.

HTML-Templates für Javascript

HTML5 hat HTML-Templates für Javascript mitgebracht, die mit Javascript cloneNode in »echte« HTML-Fragmente umgewandelt und eingebunden werden.

Vorher ist das Markup kein Teil des DOMs und kann auch nicht mit Methoden wie document.getElementById angesprochen werden.

Inhalte eines Template-Tags werden erst heruntergeladen, wenn der Template-Code offiziell geklont und eingebunden ist: Bilder in einem Template-Tag werden nicht geladen.

Das Template für die Slideshow ist schlicht und kann im head oder an belieber Stelle im body stehen.

<template id="t">
   <figure>
      <img>
      <figcaption></figcaption>
   </figure>
</template>

Das Markup für die Slideshow ist leer.

<div class="bss-slides"></div>

var src = [
   ['beach.png','Am Strand'],
   ['luftschloss.png', 'Luftschlösser '],
   ['fishing.png','Trout fishing in america']
];

var t = document.querySelector('#t');
var figcaption = t.content.querySelector('figcaption');
var img = t.content.querySelector('img'); 

src.forEach (function (image, index) {
   figcaption.innerHTML = src[index][1];
   img.setAttribute('src',src[index][0]);
   img.setAttribute('alt',src[index][1]);
   var clone = document.importNode(t.content, true);
   document.querySelector('.bss-slides').appendChild (clone);
});

makeBSS('.bss-slides');

Das Script erzeugt das Markup für die Slideshow:

<figure>
   <img src="beach.png" alt="Am Strand">
   <figcaption>Am Strand</figcaption>
</figure>

…

<figure>
   <img src="summr.png" alt="Easing at the beach">
   <figcaption>Easing at the beach</figcaption>
</figure>

makeBSS ist der Aufruf für Better Simple Slideshow von Mark Less A better simple Slideshow, ein Slideshow ohne jQuery.

Browser-Support für HTML-Template-Tag

Microsoft Edge 13 hat template-Support an Bord (ich hatte schon Bedenken, mit "13" könnte 3013 gemeint sein). Aber noch kommt IE10 vor (wenn auch selten), der Support für IE11 soll noch ein paar Jahre andauern – und diese Browser unterstützen HTML Templates für Javascript nicht.