Einleitung

Was ist Handlebars?

Handlebars ist eine einfache Template-Sprache .

Was sind Templatesprachen?

Templatesprachen sind besondere Programmiersprachen. Man nennt sie auch formale Sprachen. Sie helfen dabei, Inhalte automatisch zu erzeugen oder zu verändern.

Wie funktioniert das mit Templates?

Ein Template ist eine Vorlage. Diese Vorlage enthält zwei Arten von Inhalten:

• feste Teile, die immer gleich bleiben (zum Beispiel Texte oder HTML-Elemente)
• Platzhalter, in die später Daten eingefügt werden

Die Platzhalter füllt ein Programm, das man Template-Engine nennt. Das passiert zur Laufzeit, also genau dann, wenn das Programm ausgeführt wird.

Warum sind Templatesprachen praktisch?

Templatesprachen trennen genau zwischen Logik und Darstellung.

• Die Logik sagt, welche Daten gezeigt werden sollen.
• Die Darstellung bestimmt, wie diese Daten aussehen sollen.

Diese Trennung ist wichtig, wenn viele Menschen an einem Projekt arbeiten. So kann man den Code besser verstehen und einfacher ändern.

Woher kommen die Daten?

Templatesprachen enthalten selten eigene Inhalte. Die Daten kommen meist von außen. Oft nutzt man dafür eine Datenbank.

Eine Datenbank ist eine geordnete Sammlung von Daten. Sie speichert Informationen und gibt sie auf Anfrage wieder aus – zum Beispiel Namen, Adressen oder Produktlisten.

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>

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

 {{! 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/