Templating with good ol‘ Javascript

Avatar 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


Mit HeidiSQL per SSH-Tunel auf Live-Systeme verbinden

Autor: Stefan Oswald


Technologie


Unsere Produktiv-Systeme akzeptieren aus Sicherheitsgründen keine Verbindungen mit dem MySQL-Server von externen Adressen. Dennoch möchte man manchmal mit einem anderen Tool als phpMyAdmin auf die Datenbanken sehen. Die Lösung hierfür ist ein SSH-Tunnel. Einfacher Hintergrund: Statt auf den normalen MySQL-Port verbinden wir uns über den SSH-Server mit dem Zielsystem. Dort angekommen können wir uns mit …


Beitrag lesen
23.
April
2012

ReCSS – Reload your CSS

Autor: Benjamin Hofmann


Technologie


Jeder kennt das Problem. Man ändert einen kleinen Style, bspw. ob der Text fett ist oder nicht und dann lädt man die Seite neu, um zu schauen wie es aussieht. Und dann wartet man. Lokal manchmal sogar ziemlich lang und das für die kleinste Anpassung. Es gibt jedoch ein kleines Bookmarklet, um die Style-Entwicklung zu …


Beitrag lesen
22.
August
2012

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

lory

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Und schon wieder habe ich eine kleine schöne Javascript-Library gefunden: lory. Diesmal ist es keine Lightbox-Lösung wie PhotoSwipe gestern, sondern ein simpler Slider. Auch dieses Skript ist auf den mobilen Anwendungsfall ausgelegt und kann von Haus aus mit Swipes umgehen. Auch das sogenannte Infinite-Sliding ist möglich und auch dieses Skript lässt sich über RequireJS nutzen …


Beitrag lesen
23.
Sep.
2016