Javascript und HTML template-Tag

Template-Systeme

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

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

Das Markup für die Slideshow ist leer.

SLIDESHOW

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

JAVASCRIPT

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

let t = document.querySelector('#t');
let figcaption = t.content.querySelector('figcaption');
let 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]);
   let 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). IE10 ist vergessen, der Support für IE11 wurde Ende 2020 eingestellt – diese Browser unterstützten HTML Templates für Javascript nicht.