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.

Diese Templates sind immer dann effizient, wenn HTML-Elemente auf eine Anforderung hin mehrfach eingefügt werden sollen. 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 ein spezielles Template-Element für Javascript, das mit Javascript cloneNode in »echte« HTML-Fragmente umgewandelt und eingebunden wird.

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-Beispiel 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) { … }

Template Literals – native Javascript Template Engine

Template Literal ist mit ES6 auf den Plan getreten und ersetzt das Katzenhaarknäuel von verschachtelten einfachen und doppelten Hochkommas, +- und \-Zeichen der Mischung aus Strings und Variablen.

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.

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 }
];

let template = lager.map(item => {
	return `
		<div class="entry">
			<span class="frucht">${item.frucht}</span>
			<span class="num ger">${item.ger}</span> 
			<span class="num austria">${item.austria}</span> 
			<span class="num switzerland">${item.switzerland}</span> 
		</div>
	`;
}).join("");

document.querySelector("fruit-shop").innerHTML = template;

Eleganter als HTML-Templates für Javascript allemal, und eine native Javascript-Template-Engine anstelle der wechselnden Template Engines von Handlebar bis Moustach.