Templating with good ol‘ Javascript

Datum: 29. September 2016
Autor: Benjamin Hofmann


Die letzten Tage bin ich auf eine interessante Technik gestoßen, mit der man ein sehr simples Templating in Vanilla JS umsetzen kann.

Das Ganze orintiert sich an den Techniken, die z.B. Handlebars.js oder die originale Micro-Templating-Technik von John Resig nutzen, ist jedoch deutlich kleiner.

Der Code

Der komplette Code basiert auf RequireJS, kann aber natürlich von da aus auch weiter adaptiert oder gewrappt werden.

Das folgende Skript dient dazu Zugriff auf das globale document zu erhalten ohne global darauf zuzugreifen und ist eine reine Dependency für das eigentliche Templating-Skript.

define(function() {
  return document;
});

Hier die eigentliche Template-Enginge. Diese erwartet in der render-Methode zwei Parameter:

  1. Eine HTML-ID, um ein Template aus dem DOM auslesen zu können.
  2. Ein JSON-Objekt, um das Template mit Daten befüllen zu können.

Das Template liegt in einem speziellen script-Tag im DOM herum, wird jedoch nicht vom Browser gerendert. Über ein ID-Attribut wird es dann ausgelesen und dessen Inhalt im Modul selbst zwischengespeichert, um diese DOM-Operation bei zukünftigen Wieder-Verwendungen einsparen zu können. Schlussendlich werden die definierten Platzhalter aus dem Template mit den Werten aus dem JSON-Objekt ersetzt und das fertige HTML zurückgegeben.

define([
  'global/document'
], function(document) {
  'use strict';

  var templates = {};

  /**
   * Renders the given template by extracting it from the DOM and replacing its placeholders with the given data.
   * If the template was loaded before it will be cached and fetched from there for better performance and less memory usage.
   *
   * @param {String} id
   * @param {Object} data
   * @returns {String}
   */
  var render = function(id, data) {
    if(!templates[id]) {
      templates[id] = document.getElementById(id).innerHTML;
    }
    
    var template = templates[id];

    for(var key in data) {
      template = template.replace('{' + key + '}', data[key]);
    }
    return template;
  };

  return {
    render: render
  };

});

Das Template wird über ein script-Tag eingebunden, welches mit dem Type text/html versehen wird. Damit wird es nicht vom Browser gerendert und über die zugewiesene ID wird es per Skript auslesbar. Der Type ist bei unserer Entwicklung mit NetBeans übrigens wichtig, da dieses sonst nicht sauber formatieren kann.

<script id="map__popup--template" type="text/html">
  <img src="{thumbnail}" alt="" width="400" height="250">
  <div class="map__popup__content">
    <h2>{title}</h2>
    <p>{desc}</p>
    <a href="{link}" class="button button--info">zum Artikel</a>
  </div>
</script>

Genutzt werden kann das Ganze anschließend wie folgt. Was man dann mit dem gerenderten HTML anstellt ist damit jedem selbst überlassen.

requirejs([
  'helper/templating'
], function(templating) {
  'use strict';
  
  var html = templating.render('map__popup--template', {
    thumbnail: 'http://loremflickr.com/400/250/dog',
    title: 'Der Titel',
    desc: 'Das ist die Kurzbeschreibung.',
    link: 'http://example.com',
  });
  
  // Do something with the created HTML here.
});

Vorteile dieses Vorgehens

Bisher haben wir gerne auf EJS gesetzt, welches für komplexeres Templating auch weiterhin eine sehr gute Alternative darstellt. Der große Nachteil bei dieser Library ist jedoch der Overhead, der durch die zusätzlichen synchronen AJAX-Requests entsteht.

Für einfache Aufgaben wie das Rendern von z.B. Infowindows und Markern innerhalb von Karten, Elementen in Warenkörben, usw. bietet sich jedoch der simplere Ansatz durchaus an. Man spart damit extra Requests an den Server, der Browser-Cache des Users kann nicht für Verwirrung sorgen und man hat bereits alles was man benötigt zur Hand ohne diese Templates noch irgendwie extra ermitteln zu müssen.

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Linux Ordner und Datei Rechte

Autor: Florian Müller


Technologie


Da ich gerade darauf gestoßen bin und es für einige Verwirrung bei mir und ein paar anderen gesorgt hat (vor allem bei mir), möchte ich meine Erkenntnisse über das Thema Linux Datei und Ordner Rechte mit euch teilen. Man stelle sich vor, man hat eine Datei die in einem Ordne liegt, welche die folgenden Rechte …


Beitrag lesen
02.
August
2016

http://webplatformdaily.org/

Autor: Bastian Schwarz


Technologie // Über den Tellerrand // User Experience & Design


Ich habe eine neue Seite (http://webplatformdaily.org/) entdeckt, die täglich Links zu folgenden Themen aus Twitter sammelt: Open Web Platform (including the open standards that comprise it) JavaScript (the core language and libraries written in it) web-browsers (including their development tools) front-end web-development in general open source to some degree (e.g. GitHub related content) Das Projekt …


Beitrag lesen
09.
April
2013

Animierte Gifs im IE

Autor: Bastian Schwarz


Technologie


Gerade hat mich der IE mal wieder erstaunt (im negativen Sinne). Bei der IBE-Suche der AWK wird zur Überbrückung der Ladezeit eine Ladeanimation eingeblendet. Diese Animation wird mit einem animierten Gif dargestellt. Allerdings hat das Gif im Internet Explorer die Animation nicht ausgeführt. Nach ein wenig Recherche bin ich auf einen Bug im IE gestoßen …


Beitrag lesen
04.
Mai
2012

video.js – HTML5-Video-Kmponente mit Polyfill für alte Browser

Autor: Stefan Oswald


Projekte // Technologie // User Experience & Design


Webseite: http://www.videojs.com/ Ich habe es mir noch nicht im Detail angeschaut, aber rein von der Beschreibung her könnte das für uns mal ganz nützlich sein. Man kann per API auch Loader für eigene Video-Provider umsetzen. Kostenlos einsetzbar dank Apache 2.0 Lizenz.


Beitrag lesen
14.
Mai
2013