201122Aug

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 - The tiny JSON rendering engine by TwigKit

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.