Handlebars
Inhaltsverzeichnis
Einleitung
Was ist Handlebars?
Handlebars ist eine einfache Template-Sprache .
Sie verwendet eine Vorlage und ein Eingabeobjekt, um HTML oder andere Textformate zu generieren. Handlebars-Vorlagen sehen aus wie normaler Text mit eingebetteten Handlebars-Ausdrücken.
<p>{{vorname}}{{nachname}}</p> Ein Handlebars-Ausdruck besteht aus {{ , einem Inhalt und anschließendem }} . Wenn die Vorlage ausgeführt wird, werden diese Ausdrücke durch Werte aus einem Eingabeobjekt ersetzt.
Installation
Die schnellste Möglichkeit, Handlebars zu testen, besteht darin, es von einem CDN zu laden und in eine HTML-Datei einzubinden.
>script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"<>/script<
>script<
// Die Vorlage kompilieren
var template = Handlebars.compile("Handlebars {{doesWhat}}");
// die kompilierte Vorlage ausführen und die Ausgabe auf der Konsole ausgeben
console.log(template({ doesWhat: "rocks!" }));
>/script<
WARNUNG
Diese Methode eignet sich für kleine Seiten und zum Testen. Für produktive Systeme gibt es mehrere andere Möglichkeiten, Handlebars zu verwenden.
Sprachfunktionen
Einfache Ausdrücke
Wie bereits gezeigt, definiert die folgende Vorlage zwei Handlebars-Ausdrücke:
<p>{{vorname}}{{nachname}}</p> Wenn diese Vorlage auf das folgende Eingabeobjekt angewendet wird:
{ vorname: "Yehuda", nachname: "Katz",} werden die Ausdrücke durch die entsprechenden Eigenschaften ersetzt. Das Ergebnis ist dann:
<p>Yehuda Katz</p> Der each -Helper iteriert über ein Array und ermöglicht den Zugriff auf die Eigenschaften jedes Objekts mithilfe einfacher Handlebars-Ausdrücke.
<ul class="people_list">{{#each personen}}<li>{{this}}</li>{{/each}}</ul> { personen: [ "Yehuda Katz", "Alan Johnson", "Charles Jolley", ],} Template-Kommentare
Sie können Kommentare in Ihrem Handlebars-Code verwenden, genau wie in Ihrem regulären Code. Da es oft eine gewisse Logik gibt, ist dies eine gute Praxis.
Die Kommentare erscheinen nicht in der endgültigen Ausgabe. Wenn Sie möchten, dass die Kommentare angezeigt werden, verwenden Sie stattdessen HTML-Kommentare.
Jeder Kommentar, der }} oder andere Handlebars-Tokens enthalten muss, sollte die Syntax {{!-- --}} verwenden.
{{! Dieser Kommentar wird nicht in der Ausgabe erscheinen }}
<!-- Dieser Kommentar erscheint als HTML-Kommentar -->
{{!-- Dieser Kommentar kann Mustaches wie }} enthalten --}} Benutzerdefinierte Helfer
Handlebars-Helfer können von jedem Kontext in einer Vorlage aufgerufen werden. Sie können einen Helfer mit der Methode Handlebars.registerHelper registrieren.
{{vorname}}{{laut nachname}} Handlebars.registerHelper('laut', function (einString) { return einString.toUpperCase();}) Quelle: https://handlebarsjs.com/guide/
Letzte Änderung am Aktualisiert am: 15.06.2025