Templating Engine: Handlebars

Handlebars ist eine Templating Engine für JavaScript und kann sowohl im Browser, zum generieren von statischen Seiten oder mit Node.js genutzt werden.

Die Syntax bedient sich für Variablen oder Schleifen der geschweiften Klammern <h1>{{pageTitle}}<h1>, ähnlich wie bei den kompatiblen Mustache Templates.

Ein Beispiel für den Einsatz von Handlebars um eine Liste von Artikeln aus einem JSON Objekt zu rendern:

JavaScript Objekt:

<code>artikel = [
    {
        titel: 'Node.js installieren',
        link: 'http://jsnews.de/node-js-installieren/'
    },
    {
        titel: 'JavaScript Basics: Schleifen: for, forEach, while',
        link: 'http://jsnews.de/javascript-basics-schleifen-for-foreach-while/'
    },
]
</code>

Handlebars.js Template:

<code>  {{#each artikel}}
  <h2><a href="{{link}}">{{titel}}</a></h2>
  {{/each}}
</code>

HTML Output:

<code><ul>
    <li><a href="http://jsnews.de/node-js-installieren/">Node.js installieren</a></li>
    <li><a href="http://jsnews.de/javascript-basics-schleifen-for-foreach-while/">JavaScript Basics: Schleifen: for, forEach, while</a></li>
</ul>
</code>

Handlebars mit Express.js

Um Handlebars mit Express.js einzusetzen gibt es bereits ein NPM Modul, dass den einfachen Einsatz ermöglicht. Das Modul express3-handlebars implementiert sowohl die Handlebars Templates, als auch verschiedene Optionen um das Rendern von Layouts zu automatisieren und nur teile des Templates zu ändern.

Durch das Hinzufügen der folgenden Linien zur express.js app erhalten wir Zugriff auf die Handlebars view engine:

<code>app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');
</code>

Wer seine Dateien lieber .hbs und nicht .handlebars nennt, kann dies mit der extname variable setzen:

<code>app.engine('.hbs', exphbs({extname: '.hbs'}));
app.set('view engine', '.hbs');
</code>

Darüber hinaus sorgt das Modul auch für ein Caching sofern sich die Seite im production Modus befindet.