Tempo: JSON-Daten in JS/HTML-Templates verwenden
JavaScript-Templates können bei komplexeren Projekten ein essenzielles Werkzeug sein und lassen sich beispielsweise mit dem jQuery Template-Plugin oder Mustache leicht umsetzen. Wer JSON-Datensätze verarbeiten will und zudem eine saubere Trennung zwischen HTML und JavaScript wünscht, ist mit der JSON-Rendering-Engine Tempo gut bedient: HTML-Strukturen können mit dynamischen Platzhaltern versehen werden, die dann durch JavaScript mit JSON-Daten ersetzt werden. Somit wird Inline-JavaScript und HTML-Ballast innerhalb des JavaScript-Quellcodes überflüssig.
Tempo setzt dabei teilweise auf das data-Attribut und so können auch Fallbacks implementiert werden, die auf bestimmte Situationen reagieren. Ein Tempo-Template könnte dann so aussehen:
- <ol id="tempo-template">
- <li data-template>
- {{nickname}} {{name.last}}
- <ul>
- <li data-template="nested">{{title}}</li>
- </ul>
- </li>
- </ol>
- // Der JavaScript-Aufruf von Tempo wird auf die ID angewendet:
- Tempo.prepare("tempo-template").render(data);
- // Die Datensätze liegen in JSON vor:
- var data = [
- { …
- "nested" : [{ "title" : "Eintrag" }]
- … }
- ];
In dem obigen Template wird ersichtlich, dass Tempo auch verschachtelte Data-Templates unterstützt, wodurch die JSON-Daten unterschiedlich verarbeitet werden können. Auf der Website der Rendering-Engine findet sich eine ausführliche Dokumentation und bei GitHub gibt es das Projekt wieder als Download.