HandlebarsJS: Eine kleine Einführung

Was ist Handlebars

Handlebars ist eine Template Engine für JavaScript, die es ermöglicht schnell Webseiten mit dynamisch Werten zu befüllen. Für Frameworks wie EmberJS oder Serverseitige Entwicklung (Nodejs) wird Handlebars häufig bentzt.

Vorbereitungen

Zunächst benötigt man einen Texteditor und die Javascript-Bibliothek.

Als Texteditor verwende ich in diesem Beispiel Brackets, da man es schön für Frontend-Entwicklung verwenden kann. (http://www.brackets.io)

Handelbars kann man unter folgenden Link herunterladen: http://http://handlebarsjs.com

Erste Schritte

Zunächst habe ich ein neues leeres Verzeichnis angelegt:

Als nächstes ist die Handlebars.js in das Verzeichnis zu kopieren:

Anschließend startet man Brackets und wählt den Projektordner aus:

Um eine gute Unterstützung durch Brackets zu bekommen, sollte man die Handlebars Erweiterungen installieren, unter dem Menüpunkt "Datei\Erweiterungs-Verwaltung":

Als nächstes legen wir uns eine index.html Datei an:

Im head wird zunächst die Bibliothek importiert:

    <head>
        <script src="handlebars-v4.0.5.js"></script>
    </head>

Im Body definieren wird ein leeres DIV-Element erstellt, dass das Ergebnis aufnehmen soll:

        <div id="insert"/>

Auch in den Body müssen wir das Template legen. Damit das Template später angesprochen werden kann, geben wir ihm die ID "test-template". Templates befinden sich bei Handlebars immer in einem SCRIPT-Element. Platzhalter werden immer zwischen zwei doppelten geschweiften Klammern "{{wert}}" gesetzt. Diese Klammeren werden auch als mustaces also Schnurrbärte bezeichnet.

        <script id="test-template" type="text/x-handlebars-template">
            <h1>Hallo {{user}}, wie geht es dir?</h1>
        </script>

Nun bauen wir noch ein sehr einfaches JavaScript, dass das Template einliest. Anschließend füllt es den dynamischen Wert ein und fügt es dann in das leere DIV-Element:

<script type="text/javascript">  
            // Holen des Templated mit der ID
            var testTemplate = document.getElementById("test-template").innerHTML;

            // compilieren des Templates
            var template = Handlebars.compile(testTemplate);

            // Übertragen der dynamischen Werte in das Template
            var data = template({
                user: "Christian"
            });

            // Wert des Templates in das Insert Element einfügen
            document.getElementById("insert").innerHTML += data;
        </script>

Das gesamte Index.html Dokument sollte nun, wie folgt aussehen:

<html>  
    <head>
        <script src="handlebars-v4.0.5.js"></script>
    </head>
    <body>
        <div id="insert"/>

        <script id="test-template" type="text/x-handlebars-template">
            <h1>Hallo {{user}}, wie geht es dir?</h1>
        </script>

        <script type="text/javascript">
            // Holen des Templated mit der ID
            var testTemplate = document.getElementById("test-template").innerHTML;

            // compilieren des Templates
            var template = Handlebars.compile(testTemplate);

            // Übertragen der dynamischen Werte in das Template
            var data = template({
                user: "Christian"
            });

            // Wert des Templates in das Insert Element einfügen
            document.getElementById("insert").innerHTML += data;
        </script>
    </body>
</html>  

Nun kann man sich sehr leicht in Brackets das Ergebnis anzeigen lassen, in dem man auf das Blitz-Symbol klickt:

Anschließend zeigt der Browser das Ergebnis an:

Einfache Iterationen

Um eine einfache Iteration mit Handlebars zu ermöglichen, erweitern wir das Objekt, dass wir an das Template geben mit einen Array, dass drei Werte enthält:

            var data = template({
                user: "Christian",
                punkte: [
                    {punkt: "Wichtig"},
                    {punkt: "Weniger wichtig"},
                    {punkt: "unwichtig"}
                ]
            });

Eine Schleife über das Array wird über die zwei Each-Kommandos in geschweiften Klammern eingeschlossen. Punkte wäre in diesen Beispiel der Name des Arrays:

                {{#each punkte}}
                {{/each}}

Für jeden Eintrag soll ein Punkt in eine Auflistung gesetzt werden:

            <ol>
                {{#each punkte}}
                    <li>{{punkt}}</li>
                {{/each}}
            </ol>

Die gesamte Index.html sieht nun wie folgt aus:

<html>  
    <head>
        <script src="handlebars-v4.0.5.js"></script>
    </head>
    <body>
        <div id="insert"/>

        <script id="test-template" type="text/x-handlebars-template">
            <h1>Hallo {{user}}, wie geht es dir? </h1>
            <p>Punkte:</p>

            <ol>
                {{#each punkte}}
                    <li>{{punkt}}</li>
                {{/each}}
            </ol>
        </script>

        <script type="text/javascript">
            // Holen des Templated mit der ID
            var testTemplate = document.getElementById("test-template").innerHTML;

            // compilieren des Templates
            var template = Handlebars.compile(testTemplate);

            // Übertragen der dynamischen Werte in das Template
            var data = template({
                user: "Christian",
                punkte: [
                    {punkt: "Wichtig"},
                    {punkt: "Weniger wichtig"},
                    {punkt: "unwichtig"}
                ]
            });

            // Wert des Templates in das Insert Element einfügen
            document.getElementById("insert").innerHTML += data;
        </script>
    </body>
</html>  

Und stellt sich im Brower nun wie folgt da:

Konvertieren von HTML Tags

Möchte man HTML Tags nicht konvertiert bekommen, sind Werte in drei geschweiften Klammern einzuschließen.

Erweitern wir das Objekt um ein Beispieltext mit HTML Tags:

            // Übertragen der dynamischen Werte in das Template
            var data = template({
                user: "Christian",
                punkte: [
                    {punkt: "Wichtig"},
                    {punkt: "Weniger wichtig"},
                    {punkt: "unwichtig"},
                ],
                beispiel: "Das ist ein <strong>Beispiel</strong>!"
            });

Und das Template wird erweitert um:

            <p>{{beispiel}}</p>
            <p>{{{beispiel}}}</p>

Die Index.html sieht nun wie folgt aus:

<html>  
    <head>
        <script src="handlebars-v4.0.5.js"></script>
    </head>
    <body>
        <div id="insert"/>

        <script id="test-template" type="text/x-handlebars-template">
            <h1>Hallo {{user}}, wie geht es dir? </h1>
            <p>Punkte:</p>

            <ol>
                {{#each punkte}}
                    <li>{{punkt}}</li>
                {{/each}}
            </ol>

            <p>{{beispiel}}</p>
            <p>{{{beispiel}}}</p>
        </script>

        <script type="text/javascript">
            // Holen des Templated mit der ID
            var testTemplate = document.getElementById("test-template").innerHTML;

            // compilieren des Templates
            var template = Handlebars.compile(testTemplate);

            // Übertragen der dynamischen Werte in das Template
            var data = template({
                user: "Christian",
                punkte: [
                    {punkt: "Wichtig"},
                    {punkt: "Weniger wichtig"},
                    {punkt: "unwichtig"},
                ],
                beispiel: "Das ist ein <strong>Beispiel</strong>!"
            });

            // Wert des Templates in das Insert Element einfügen
            document.getElementById("insert").innerHTML += data;
        </script>
    </body>
</html>  

Und das Ergebnis im Browser sieht nun wie folgt aus:

Zusammenfassung

Ich hoffe diese kleine Einführung hat ein wenig gezeigt für was Handlebars sinnvoll ist. Selbstverständlich gibt es noch viel mehr Funktionen, wie Helper, bedingte Anzeige von Elementen, die Handlebars erst zu einem wichtigen Werkzeug machen.

Die Webseite http://handlebarsjs.com gibt eine sehr gute Einführung für alle implementierten Elemente und der API.