In Handlebar-Templates wird die HTML Struktur eines Widgets definiert. Dabei können Sie Platzhalter verwenden um dynamisch Daten einzubauen. In Handlebars stehen zwei Arten von einfachen Platzhaltern zur Verfügung.
Ein Platzhalter, der mit zwei geschweiften Klammern umschlossen angeben ist (z.B. {{platzhalter}}), wird durch den Wert ersetzt. Dabei werden Sonderzeichen für HTML nicht interpretiert. Dies gewährleistet die korrekte Darstellung eines Wertes (z.B. Umlaute), aber die Verwendung von HTML-Tags ist dabei nicht möglich. Innerhalb von Platzhaltern können Sie auch über die Punkt-Notation auf Attribute von Objekten zugreifen.
Wenn Sie HTML-Tags ausgeben möchten, können Sie drei geschweifte Klammern (z.B. {{{platzhalter}}}) verwenden.
Template:
<div>
<h1>{{title}}</h1>
Wert 1: {{platzhalter.wert}}
Link: {{{platzhalter.link}}}
</div>
Daten:
{
title: "Test"
platzhalter: {
wert: "Wörter mit Umlauten",
link: '<a href="https://www.jobrouter.com/de">Webseite</a>'
}
}
Ergebnis:
<div>
<h1>Test</h1>
Wert 1: Wörter mit Umlauten
Link: <a href="https://www.jobrouter.com/de">Webseite</a>
</div>
