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


Eine eigene kleine Root-CA für den localhost installieren

Autor: Benjamin Hofmann


Technologie


Es ist eigentlich ein Wunder, dass  es immer noch keine allgemein anerkannte Lösung dafür gibt, selbsterstelle Zertifikate auf dem lokalen Webserver auf einfache Art und Weise zu installieren. Zumindest ist mir keine bekannt und ich hatte heute das große Vergnügen genau dies tun zu müssen.


Beitrag lesen
02
AUG
18

Flickr und das Image Plugin oder „Dees is sowieso blääd“

Autor: Bastian Schwarz


Technologie


Gerade habe ich ein Problem für unser Kundenprojekt „Holsteinische Schweiz“ analysiert: Im Keyvisual wurden bis zu 20 Flickr-Bilder geladen. Die URLs der Bilder wurden über die Flickr API geholt und dann durch das Image Plugin geladen, entsprechend gerechnet und abgelegt. So weit, so gut. Nun das Problem: Für den Dateinamenhash benutzt ajaxImage u.a. die Breite …


Beitrag lesen
21
SEP
11

XAMPP unter Windows vs. SSL Authentifizierung

Autor: Benedikt Keller


Technologie


Heißen Käfer im Apache unter XAMPP auf Windows entdeckt: Im Zuge eines Relaunch bin ich heute auf einen kuriosen Fehler gestoßen. Um einen Import von Events aus dem Google-Kalender umzusetzen, musste ich mir erst mal die Google PHP Client Library laden und ins Projekt setzen. Diese versucht natürlich erst mal einen per SSL verschlüsselten Authentifizierungs-Request abzusetzen. …


Beitrag lesen
02
JUL
15