Templating with good ol‘ Javascript

Datum: 29. September 2016
Autor*in: 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


Prompt to Image KIs im infomax Kreativ Workflow

Autor*in: Axel Güldner


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


Können Computer träumen? Noch im Sommer 2022 während eines Vortrags im Rahmen der imx.Conference antworte ich auf die von mir selbst gestellte Frage mit einem entschiedenen NEIN! Kreative Leistung ist das unangefochtene Hoheitsgebiet von uns Menschen, war ich damals überzeugt. Und jetzt?


Beitrag lesen
03
MAI
23

Netbeans und GIT

Autor*in: Florian Müller


Technologie


Ich habe mich mal während der Arbeit mit Git mit den Git Hooks beschäftigt. Ziel war es, unnötige Builds in der Pipeline zu vermeiden, welche aufgrund von Lintern fehlschlagen. Dazu wollte ich einen Pre-Commit Hook einsetzen. Ein simpler Hook, welcher vor einem Commit ausgeführt werden sollte: Wenn man über die Command line commiten will, wird diese auch …


Beitrag lesen
21
APR
17

Webfonts und der Layout Shift

Autor*in: Axel Güldner


infomax // Technologie // User Experience & Design


„Webfonts sind super“ – erläutert der Webdesigner mittleren Alters. „Bevor wir Webfonts hatten, waren wir mal sowas von eingeschränkt – Arial, Verdana, Georgia – Bums aus die Maus, sehr viel mehr hatten wir nicht.“ führt er weiter aus und klingt dabei wie ein Großvater der vom Krieg erzählt.„Webfonts sind furchtbar“ – erfährt man hingegen vom …


Beitrag lesen
27
OKT
21

Bug in Netbeans 8.0.1 und Lösung

Autor*in: Bastian Schwarz


Technologie


Wie einige mitbekommen haben hatte ich nach dem Update auf Netbeans 8.0.1 kein Autcomplete mehr und auch alle anderen Sachen wie Open Class, Navigation etc. gingen nicht mehr. Heute habe ich endlich eine Lösung gefunden: https://netbeans.org/bugzilla/show_bug.cgi?id=247026 Readers Digest: Offenbar gab es Änderungen wie der Index geschrieben wird, dieser sollte das erkennen und sich neu aufbauen. …


Beitrag lesen
23
SEP
14