Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up

Handlebars.js – Die Semantische Template Library

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.

Handlebars.js – Semantische Template Library-1
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.

Handlebars.js – Semantische Template Library 2
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.

Handlebars.js – Semantische Template Library 3
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

Anonyme Referenz
Referenz

Produkt-Echtzeitanalyse bei Maschinenbauunternehmen

Ein deutsches Maschninenbauunternehmen ermöglicht mit Hilfe von X-INTEGRATE und Industrie 4.0 Technologie ihren Kunden, den Status jedes Geräts visuell und in Echtzeit zu überwachen.

Event

Webcast: KI für Versicherer

Dr. Matthias Quaisser erläutert Ihnen praktische Projekterfahrung und Erfolgsfaktoren von KI und erzählt von fachliche Anwendungsfälle von KI bei Versicherern.

May 14
Event

Webcast: Cloud Transformation & "run your App"

Lernen Sie mit Jochen Schneider die Cloud 1.0 (Cloud 1.0 (Lift&Shift), Cloud 2.0 (Microservices, Big Data) und Cloud 3.0 (Multi Cloud Management, Big Compute) kennen.

Standort

Seligenstadt

Finden Sie u.a. novaCapta GmbH und TIMETOACT Software & Consulting GmbH in Seligenstadt: Dr.-Hermann-Neubauer-Ring 40; 63500 Seligenstadt

Unternehmen

CLOUDPILOTS Software & Consulting GmbH

CLOUDPILOTS berät und begleitet Unternehmen bei dem Transformationsprozess von Geschäftsprozessen und -anwendung in die Cloud und unterstützt bei der Implementierung von Cloud basierten IT-Services (SaaS).

Process Integration & Automation
Service

Process Integration & Automation

Unternehmensprozesse digitalisieren und verbessern sowie auf Veränderungen agil reagieren – diesen Herausforderungen sehen sich immer mehr Unternehmen gegenübergestellt.

Event

Webcast: Chancen des Quantum Computing für Versicherer

Dieser Webcast liefert einen Einblick in das Thema Quantencomputer und dessen Stand der Technik. Behandelt wird das Potential dieser Technologie und wie man sich auf diesen sprichwörtlichen Quantensprung in der IT vorbereiten kann.

Aug 11
Event

Künstliche Intelligenz in der Rechnungsprüfung

Webcast 06.Oktober: Techniken des maschinellen Lernens können die Prüfung von Rechnungen in der privaten Krankenversicherung effektiv unterstützen. „Natural Language Processing“ ermöglicht so die Klassifikation von kurzen Texten aus den Tabellen von Rechnungen.

Oct 06
Unternehmen 16.09.20

synaigy

synaigy – die Digitalagentur für Ihr strategisches Projekt im digitalen Kundendialog bietet passende Lösungen in allen relevanten Bereichen des Digital Customer Engagement an.

Managed Services & Managed Support
Service

Managed Services & Managed Support

Durch unsere Managed Service Team aus Spezialisten der TIMETOACT GROUP entlasten Sie Ihr IT-Department. Wir sorgen dafür, dass Sie effizienter, zuverlässiger und schneller arbeiten können

Social 16.02.21

FAST-elovend 2021 – unsere virtuelle Karnevalsfeier

Kölle Alaf! Auch dieses Jahr feierten die Jecken der TIMETOACT GROUP Fastelovend - aber nur FAST so wie immer. Denn nach unserer (digitalen) Weihnachtsfeier ließen wir uns auch Karneval nicht nehmen und feierten Karneval einfach virtuell.

Event 22.04.21

Webcast: AI Factory for Insurance

Im Webcast erfahren Sie, warum das Thema Künstliche Intelligenz für Versicherer so wichtig ist. Wir erklären Ihnen was die die AI Factory for Insurance genau ist und welche fünf Elemente die Factory ausmachen. Anschließend zeigen wir auf, wie diese konkret bei Versicherungen umgesetzt wird und wie sie sich in andere/ähnliche Initiativen eingliedern lässt.

May 11
Logo Microsoft
Technologie 29.06.20

Microsoft

Wir sind Microsoft Solutions Partner in den Bereichen Business Applications, Data & AI, Digital & App Innovation, Infrastructure Azure, Modern Work sowie Security

News 07.05.21

Equistone erwirbt Mehrheit an TIMETOACT GROUP

Im Rahmen einer Mehrheitsbeteiligung hat sich Equistone im Mai 2021 an der TIMETOACT GROUP beteiligt. Frank Fuchs komplettiert als neuer CFO die Geschäftsführung der TIMETOACT GROUP.

Headerbild zu Digitalem Ökosystem
Service

Fit für das digitale Ökosystem

Versicherer vernetzen sich digital mit ihrem Ökosystem, um kritische Fähigkeiten in einer Arbeitsteilung zu erlangen. Dabei werden Personendaten oder Vorgangsdaten sicher ausgetauscht.

Standort 17.11.20

Unsere Standorte

Wir sind Ihr Partner für die Digitalisierung vor Ort: Unsere Standorte in Deutschland, Österreich, der Schweiz, Lettland und Malaysia.

Standort

Augsburg

Finden Sie u.a. die novaCapta GmbH in Augsburg: Schertlinstraße 19, 86159 Augsburg, +49 821 789 887 90, info.augsburg@novacapta.de

Service 15.07.21

Open Insurance

Bei Open Insurance geht es darum neuartige, datengetriebene Dienstleistungen für Kunden zu erbringen – und zwar nicht allein, sondern indem man im Digitalen Ökosystem zusamnenarbeitet und Daten über Schnittstellen bezieht/bereitstellt.

Standort

Sursee

Finden Sie die novaCapta Schweiz AG in Sursee; Industriestraße 5a, 6210 Sursee, Tel: +41 41 39220 00, Mail: info.sursee@novacapta.com

News

ARS Event: KI meets Finance & Insurance

Am 20.11.2019 versammeln sich CxOs, Innovation Manager und Risk Manager zum ARS Event: KI meets Finance & Insurance 2019 in Nürnberg, um über die Zukunft der Finanzbranche zu diskutieren.

Bleiben Sie mit dem TIMETOACT GROUP Newsletter auf dem Laufenden!