Im letzten Video haben wir das Schablonieren mit Lenkern behandelt. Der Lenker ist jedoch nicht die einzige Vorlagenlösung auf dem Block. In diesem Video verwenden wir die in Underscore verfügbaren Vorlagen.
Warum? Ein Grund dafür ist, dass Sie möglicherweise bereits Unterstrich für Ihr Projekt verwenden. Es ist eine äußerst beliebte Bibliothek, da sie wie jQuery eine Reihe nützlicher Methoden bietet, die browserübergreifend funktionieren. Wie sie sagen:
Es ist die Krawatte, die zu jQuerys Smoking und den Hosenträgern von Backbone.js passt.
Wenn Sie bereits Unterstrich verwenden, wäre dies ein großer Anreiz, die Vorlage zu verwenden.
Auch in meinen Schnelltests ist Lenker 1.0.0 14,2 KB komprimiert und minimiert, und der Unterstrich ist 4,9 KB komprimiert und minimiert. Der Lenker verfügt einfach über mehr Funktionen (z. B. Kommentare, Schleifen, Pfade, Logik usw.). In unserer einfachen Demo brauchen wir diese Funktionen sowieso nicht, es ist also kein fairer Vergleich, aber wir lernen nur.
Anstatt die Vorlage im HTML zu haben, müssen wir im JavaScript Unterstreichungsvorlagen definieren. Wir sind zurück zu einer Verkettung von Zeichenfolgen.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledverwandelt sich dann in eine Funktion, die wir mit unserem Datenobjektkontext aufrufen können, und gibt den mit diesen Daten ausgefüllten HTML-Code zurück. Um effizient zu sein, werden wir den HTML-Code, der in eine große Zeichenfolge zurückkehrt, verketten, damit wir ihn 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. Wie wir es wahrscheinlich im „echten Leben“ tun müssten.
$.getJSON("/path/to/json.js", function(data) ( ));Unsere for-Schleife und solche, die sich auf diese Daten stützen, gehen dort in den Rückruf. Oder ruft eher eine andere bekannte Funktion auf, um dies zu handhaben und die Dinge sauber voneinander zu trennen.
Hier sind wir gelandet:
Siehe den Pen IpAdn von Chris Coyier (@chriscoyier) auf CodePen
Es ist zu beachten, dass LoDash zu 100% mit dem kompatibel ist, was wir hier gemacht haben. Ich bin mir nicht ganz sicher, ob das LoDash-Template besser / schneller / langsamer / schlechter ist als das von Underscore, aber ich habe die Bibliotheken ausgetauscht und die Demo hat einwandfrei funktioniert.