Agenda
Was ist Handlebars.js? Was kann Handlebars.js? Einführungs-Beispiel Verwendung von TAGs Aufbau Beispiel Vor- und Nachteile
Was ist Handlebars.js?
- Template-Engine für Java-Script
- Erweiterung von Mustache
- Logic-less Templates
- Keine if-Anweisungen, else-Klauseln oder Schleifen
- Anweisungen & Schleifen sind durch Helper in Handlebars integriert
- License: MIT License
- Kann für HTML, Konfigurationsdateien und Quellcode verwendet werden
Was kann Handlebars.js?
- Kann im Browser zum Generieren von statischen und dynamischen Seiten genutzt werden
- Kann mit Node.js auf Serverseite kompiliert werden
- Durch die Nutzung von Templates können verschiedene Werte flexibel angenommen werden
- Zum Beispiel Verweis auf JSON-Objekte
Einführungs-Beispiel
HTML
<html>
<body>
{{person}}
</body>
</html>
JSON
{
person: [
{firstName: "Philipp", lastName: "Schramm"},
{firstName: "Christoph", lastName: "Bey"},
]
}
Verwendung von TAGs
- {{ Person }} referenziert auf den Schlüssel "Person" im aktuellen Kontext
- Wenn der Schlüssel nicht gefunden wird, wird rekursiv im übergeordneten Kontext gesucht
- Durch eine dritte geschweifte Klammer wird {{{ Person }}} "HTML-escaped"
- Bei Fehlern, fehlenden Variablen oder nicht gefundenen Werten wird i.d.R. ein leerer String zurückgegeben
Aufbau
Template:
* {{ name }}
* {{ age }}
* {{{ company }}}
JSON:
{
"name": "Christoph",
"company": "<b>IBM</b>"
}
Output:
* Christoph
*
* IBM
Beispiel für Handlebars
[...]
<script type='text/javascript' src="jquery.js"></script>
<script type='text/javascript' src="handlebars.js"></script>
[...]
<script id="some-template" type="text/x-handlebars-template">
{{#university}}
<h2>People from {{ this.name }} in {{ this.city }}</h2>
{{/university}}
{{#each people}}
<li><span style="font-weight:bold">{{ this.name }} </span></li>
<li>Age: {{ this.age }} years</li>
<li>Hometown: {{ this.city }}</li>
{{/each}}
</script>
<script type="text/javascript" charset="utf-8">
var data = {
people: [
{name: "Philipp Schramm",age:"23",city:"Plankstadt"},
{name: "Christoph Bey",age:"23",city:"Olpe"}],
university:[
{name:"DHBW",city:"Mannheim"}]
};
var source = $("#some-template").html();
var template = Handlebars.compile(source);
$("#contentgoeshere").html(template(data));
</script>
[...]
Was sind die Vor- und Nachteile?
Vorteile