JSON in HTML Template rendern

Mit der Render-Engine Tempo können Daten aus einem JavaScript-Objekt problemlos in ein HTML-Gerüst (Template) übertragen werden. Die Anwendung ist super simpel und erfordert nur folgende Schritte:

Anlegen eines HTML-Templates
Deklarierung von data-template für die Einträge, die wiederholt werden sollen
Einbinden von tempo.js
Aufruf des Render-Befehls mit Übergabe des Templatenamen und der zu rendernden Daten im JSON-Format

Code-Beispiel:

<body>
  <!-- HTML Template -->
  <ol id="templateList">
    <li data-template>
      <b>{{name}} {{surname}}</b> is {{age}} years old.
    </li>
    <li data-template-fallback>Sorry, JavaScript required!</li>
  </ol>
  <!-- JSON Rendering -->
  <script src="js/libs/tempo/tempo.js"></script>
  <script>
    var data = {
      "people": [
        {
          "name":"Benny",
          "surname":"Neugebauer",
          "age":25
        },
        {
          "name":"Lara",
          "surname":"Cinzero",
          "age":32
        },
        {
          "name":"Jack",
          "surname":"Johnson",
          "age":44
        }
      ]
    };
    Tempo.prepare("templateList").render(data["people"]);
  </script>
</body>

Schreibe einen Kommentar Antworten abbrechen