# 127: Grundlagen der JavaScript-Vorlage - CSS-Tricks

Eine Vorlage ist ein Teil des HTML-Codes, den Sie auf die Seite einfügen müssen. Oft werden Vorlagen "serverseitig" erstellt, indem sie vollständig aus JavaScript stammen und nur in das DOM eingefügt werden müssen. Aber manchmal ist das nicht machbar oder erfordert einen zusätzlichen Roundtrip zum Server, der möglicherweise langsam ist. In diesem Fall ist es ideal, die Vorlage direkt in JavaScript zu haben. Sie können sicherlich nur ein bisschen String-Verkettung durchführen, indem Sie HTML- und Datenbits zusammenfügen, bis Sie die Vorlage haben, die Sie benötigen. Dies ist jedoch wahrscheinlich nicht ideal, da es die Belange von Daten und Vorlagen nicht voneinander trennt. Hier können echte JavaScript-Vorlagen helfen.

In diesem Screencast werden wir das grundlegende „Warum“ von JavaScript-Vorlagen behandeln und dann speziell ein einfaches Beispiel dafür behandeln, wie es in Underscore.js gemacht wird. Dann werden wir einige andere Alternativen behandeln.

Demo

var compiled = _.template( " " + "" + "" + " " ); var i, toAppendString = ""; for (i = 0; i < data.movies.length; i++) ( toAppendString += compiled(data.movies(i)); ) $("body").append(toAppendString);

Siehe den Stift% = penName%> von Chris Coyier (@chriscoyier) auf CodePen