Javascript Template-Engines

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.

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

Ähnlich wie in PHP nutzen Javascript Template Engines besondere Zeichenkombinationen oder Direktiven:

EJS      <%    %>
Mustache {{    }}

Javascript Template-Systeme werden z.B. in NodeJS eingesetzt, aber sie können auch ohne Node ausgeführt werden.

HTML-Templates für Javascript

HTML bietet spezielle Template-Elemente für Javascript, die mit Javascript cloneNode in »echte« HTML-Fragmente umgewandelt und eingebunden werden.

Vorher ist das Markup innerhalt des Template-Elements 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 kleine Comic-Galerie ist schlicht und kann im head- oder an belieber Stelle im body-Element stehen.

TEMPLATE

<figure class="slide">
	<img loading="lazy" img="" width="" height="" alt="">
	<figcaption></figcaption>
</figure>

Galerie

<div class="gallery"></div>

JAVASCRIPT

const slides = [
	{"src": "brusel.webp", "width": "264", "height": "360", "alt": "xml-brusel"},
	{"src": "kreide.webp", "width": "264", "height": "360", "alt": "xml-kreide"},
	{"src": "kreise.webp", "width": "264", "height": "360", "alt": "xml-kreise"}
];

const comic = document.querySelector("#slides");

for (const elem of slides) {
	const clone = comic.content.cloneNode (true);
	clone.querySelector("img").src = elem.src;
	…
	clone.querySelector("figcaption").innerHTML = elem.alt;
	document.querySelector(".slideshow").appendChild (clone)
}

Das Schöne an den schlichten Template-Elementen aus purem HTML: Für Wiederholungen der Elemente und für Abfragen werden keine speziellen Direktiven gebraucht, sondern einfach nur Javascript in Reinform.

Loop in Handlebars

{{#each array}} {{@index}}: {{this}} {{/each}}

Loop Javascript

for (const elem of slides) { … }

Templates für Tabellen und Listen

Eine typische Anwendung für Javascript Templates ist das dynamische Erstellen von Listeneinträgen und Tabellenzeilen in Anwendungen, wenn z.B. Elemente in einem JSON-Array geliefert und als Tabelle oder Liste dargestellt werden sollen.

<template id="template">
	<div class="entry">
		<span class="frucht"></span>
		<span class="num ger"></span> 
		<span class="num austria"></span> 
		<span class="num switzerland"></span> 
	</div>
</template>

<div class="result"></div>

const lager = [
{"frucht":"🌽","ger":139,"austria":20,"switzerland":11},
{"frucht":"🍆","ger":170,"austria":29,"switzerland":9},
{"frucht":"🍅","ger":163,"austria":21,"switzerland":12},
{"frucht":"🍇","ger":109,"austria":13,"switzerland":4},
{"frucht":"🍎","ger":115,"austria":17,"switzerland":8}
];

const template = document.getElementById("template");

for (const item of lager) {
	let clone = template.content.cloneNode(true);
	clone.querySelector (".frucht").innerHTML = item.frucht;
	clone.querySelector (".ger").innerHTML = item.ger;
	clone.querySelector (".austria").innerHTML = item.austria;
	clone.querySelector (".switzerland").innerHTML = item.switzerland;
	document.querySelector(".result").appendChild(clone);
}

template.content.cloneNode() kopiert nur den Inhalt des template-Elements.

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.

Template Engines

HTML-Templates sind eine einfache Technik für einfach Aufgaben wie eine Slideshow oder der Aufbau von Listen in dynamischen Seiten. In großen Projekten sind Template Engines eine effizientere Unterstützung. Mit ESJ z.B. nutzen wir ganz normales Javascript und brauchen keine neue Syntax zu lernen, sondern nur Template-Tags, einfache spitze Klammern mit einem %-Zeichen.

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>