Handlebars.js – Die Semantische Template Library

Datum

07.06.2017

Dieser Beitrag wurde verfasst von:

Lisa Reich

Handlebars.js ist eine Template-Engine für JavaScript. Sie ermöglicht dem Entwickler, mit Hilfe von semantischen Templates Business-Logik und HTML zu trennen. Somit ist es nicht von Nöten, HTML-Code per JavaScript zu generieren. Ein großer Vorteil hierbei ist die Übersichtlichkeit durch das Auslagern des JavaScript- und Handlebars-Codes in eigene .js-Dateien. Die durch Handlebars geschaffene Struktur sorgt für einen verständlichen Code und erleichtert somit die Wartbarkeit.
Ein weiterer Vorteil ist es, dass Templates nicht bei jeder erneuten Verwendung neu kompiliert werden müssen. Gerade in der mobilen Nutzung ist dies ein essentieller Performance-Gewinn.

Wann empfiehlt es sich, Handlebars.js zu verwenden?

Es empfiehlt sich, Handlebars zu verwenden, wenn Seiteninhalte während eines Aufrufes öfters aktualisiert werden (z.B. durch Filterung oder Sortierung), denn hierbei müssen die DOM-Elemente nicht jedesmal im JavaScript-Code neu generiert und eingehängt werden, sondern es werden nur entsprechende Templates gerendert. Würde man all dies von JavaScript aus steuern, müsste man jedes DOM-Element z.B. per createElement()-Methode erstellen und per appendChild()-Methode oder innerHTML-Property einzeln erstellen und einhängen.
Man sollte jedoch die Notwendigkeit einer solchen Library überprüfen, denn bei einfachen Webseiten ohne viel Logik würde Handlebars zu viel Overhead produzieren.

Anwendung

Handlebars bietet neben dem Verwenden von Platzhaltern verschiedene Helper-Functions an, wie zum Beispiel if-Abfragen, foreach-Schleifen und Block Parameters. Um Handlebars anzusprechen, werden jegliche Statements und Variablen in doppelt geschweiften Klammern geschrieben. Der Zugriff auf Funktionen erfolgt jeweils mit einem „#“ und endet mit einem „/“ vor der Anweisung.

Im folgenden Code wird geprüft, ob die Property „items“ des JSON-Objekts „news“ Einträge enthält. Ist dies der Fall wird das entsprechende Template „news-table-template“ an dieser Stelle aufgerufen. Als Parameter wird dem Template das „news“-Objekt mit übergeben.

Abbildung 1: news-template
Abbildung 1: news-template

Im Template für die News-Tabelle wird nun bis auf den <tbody> die Tabelle vorbereitet.
Die einzelnen Row‘s werden in einer foreach-Schleife erstellt, die durch „news.items“ iteriert. Für jedes Element in diesem Array wird ein <tr>-Tag erstellt und dessen <td>-Tags mit den entsprechenden Informationen befüllt.

Abbildung 2: news-table-template
Abbildung 2: news-table-template

Im folgenden JavaScript-Code wird nun zuerst das Template compiliert damit es ab sofort zur Verfügung steht. Anschließend wird mit dem vorhandenen Objekt „renderTemplate“ das Template erstellt und in den <div> mit der ID „content-body“ eingehängt. Dieser JavaScript-Code muss in die Seite per <script>-Tag eingebunden werden.

Abbildung 3: renderNewsTemplate.js
Abbildung 3: renderNewsTemplate.js

Worin genau besteht in diesem Fall der Vorteil?

Hierbei wird die Logik einer if-Abfrage und einer foreach-Schleife verwendet, um dynamisch eine Tabelle zu erstellen und diese im HTML zu rendern. Trotz dieser Logik müssen dank Handlebars.js keine HTML-Tags im JavaScript-Code erstellt werden und ebenso wird kein inline-JavaScript im HTML ausgeführt. Somit wird die Logik vom Markup getrennt und es entsteht ein übersichtlicher, gut wartbarer Code.
Zudem bringt Handlebars.js neben den oben genannten Helpern noch viele weitere Build-In Helpers mit sich, jedoch besteht auch die Möglichkeit, selbst solche Helper-Funktionen zu implementieren, welche dann im HTML aufgerufen werden können.
Eine Übersicht über alle Build-In Helpers findet man auf folgender Seite: http://handlebarsjs.com

Erfahren Sie mehr

novaCapta auf der Fachtagung für Interne Revision
Event
Event

novaCapta auf der Fachtagung für Interne Revision

Das Expertenteam der novaCapta präsentiert am 15. und 16. November ihre innovative Audit Management Lösung auf dem DIIR-Kongress in Dresden. Besuchen Sie unsere...

Jan
25
Webcast mit Microsoft: Fit für die digitale Arbeitswelt
Webinar
Webinar

Webcast mit Microsoft: Fit für die digitale Arbeitswelt

Die digitale Transformation und die Veränderung der Arbeitswelt ist längst in vielen Unternehmen und in den öffentlichen Einrichtungen angekommen. Dennoch stell...

Valo ist neuer Partner der novaCapta für Intranets
News
News

Valo ist neuer Partner der novaCapta für Intranets

Durch die Partnerschaft mit Valo, dem Ready-2-Go Intranet-Baukasten aus Finnland baut die novaCapta ihr Angebot bei der Umsetzung von schnellen und funktionalen...

Bundesliga-Tippspiel

Bundesliga-Tippspiel

Fußball ist in Ihrem Unternehmen jeden Montag Gesprächsthema Nummer eins? Dann holen Sie sich die Fußball Bundesliga in Ihr Intranet!

novaBirthday

novaBirthday

novaBirthday erweitert Ihr SharePoint-Intranet um ein soziales Feature und kann damit die Akzeptanz und Reichweite verbessern.

SharePoint Framework Client-Side Webparts mit React
Blog
Blog

SharePoint Framework Client-Side Webparts mit React

React ist ein Framework zur Erstellen von Benutzeroberflächen. In der SharePoint Online Entwicklung bietet es sich für die Entwicklung von Client-Side Webparts...

Sliding to heaven – A short story of a SPFx Slider Webpart
Blog
Blog

Sliding to heaven – A short story of a SPFx Slider Webpart

SharePoint Framework, kurz SPFx, ist eine zukunftsträchtige Technologie zur Erstellung von Webparts oder Extensions auf der Basis von TypeScript.

PayPal-Zahlung in einer MVC Anwendung
Blog
Blog

PayPal-Zahlung in einer MVC Anwendung

In diesem Blogbeitrag möchte ich demonstrieren, wie eine Einbindung von PayPal in eine MVC Applikation funktioniert.

Ich bin im Flow! – Eine Übersicht zu Microsoft Flow
Blog
Blog

Ich bin im Flow! – Eine Übersicht zu Microsoft Flow

Die Power Platform wird aktuell von Microsoft sehr stark gepusht. Zeit, sich mit dem Potenzial der einzelnen Komponenten zu beschäftigen. Heute: Flow.

End of Life – Eine Applikation wird abgelöst
Blog
Blog

End of Life – Eine Applikation wird abgelöst

Die Stilllegung einer Applikation im Application Lifecycle Management nicht beachtet. Dennoch sollten sie in einem ganzheitlichen Ansatz beachtet werden.

DevOps und Container
Blog
Blog

DevOps und Container

DevOps an sich ist nicht an eine Technologie gebunden, jedoch haben sich Container-Technologien und DevOps als Verwandte im Geiste gefunden.

SharePoint Hosted Add-in mit AngularJS 2
Blog
Blog

SharePoint Hosted Add-in mit AngularJS 2

Voraussetzungen und Umsetzung eines SharePoint Hosted Add-in mit AngularJS 2.