#24: Templating mit Underscore

Wir haben im letzten Video über Templating mit Handlebars gesprochen. Aber Handlebars ist nicht die einzige Templating-Lösung auf dem Markt. In diesem Video verwenden wir das Templating, das verfügbar ist in Underscore.

Warum? Nun, ein Grund ist, dass Sie Underscore vielleicht bereits in Ihrem Projekt verwenden. Es ist eine äußerst beliebte Bibliothek, denn wie jQuery bietet sie eine Reihe nützlicher Methoden, die browserübergreifend funktionieren. Wie sie sagen:

Es ist die Krawatte zum Smoking von jQuery und die Hosenträger von Backbone.js.

Wenn Sie Underscore bereits verwenden, wäre das ein großer Anreiz, dessen Templating zu nutzen.

Außerdem ist Handlebars 1.0.0 in meinen schnellen Tests 14,2 KB gzip-komprimiert und minimiert, und Underscore ist 4,9 KB gzip-komprimiert und minimiert. Handlebars hat einfach mehr Funktionen (z. B. Kommentare, Schleifen, Pfade, Logik usw.). In unserer einfachen Demo benötigen wir diese Funktionen sowieso nicht, daher ist es kein fairer Vergleich, aber egal, wir lernen gerade.

Anstatt die Vorlage in HTML zu haben, müssen wir Underscore-Vorlagen in JavaScript definieren. Wir sind wieder bei String-Konkatenation.

var compiled = _.template(
  "<div class='module module-movie' style='background-image: url(<%= movieImage %>)'>" + 
    "<div class='movie-info'>" +
      "<h3 class='movie-title'>" +
         "<%= movieTitle %>" + 
      "</h3>" +
      "<p class='movie-director'>" + 
         "<%= movieDirector %>" + 
      "</p>" + 
    "</div>" + 
  "</div>"
);

compiled wird dann zu einer Funktion, die wir mit unserem Datenobjektkontext aufrufen können und gibt das HTML zurück, das vollständig mit diesen Daten gefüllt ist. Um effizient zu sein, werden wir das zurückgegebene HTML zu einem einzigen großen String zusammenfügen, damit wir es nur einmal an das DOM anhängen können.

  var i, html = "";
  for (i = 0; i < data.movies.length; i++) {
    html += compiled(data.movies[i]);
  }  
  $("#movies").append(html);

In diesem Video haben wir auch das Abrufen der Daten abstrahiert. Wir haben eine JSON-Quelle erstellt und die $.getJSON()-Funktion von jQuery verwendet, um sie abzurufen. So wie wir es im "echten Leben" wahrscheinlich tun müssten.

$.getJSON("/path/to/json.js", function(data) {

});

Unsere for-Schleife und Ähnliches, die von diesen Daten abhängen, kommen dort in den Callback. Oder wahrscheinlicher, es ruft eine andere gut benannte Funktion auf, um dies zu behandeln, und hält die Dinge sauber getrennt.

Hier sind wir gelandet

Siehe den Pen IpAdn von Chris Coyier (@chriscoyier) auf CodePen

Es sollte beachtet werden, dass LoDash zu 100 % mit dem, was wir hier getan haben, kompatibel ist. Ich bin mir nicht ganz sicher, ob das Templating von LoDash besser/schneller/langsamer/schlechter ist als das von Underscore, aber ich habe die Bibliotheken ausgetauscht und die Demo hat einwandfrei funktioniert.