Erläuterung von <script type = "text/template"> ... </script>

Question

Ich bin gerade über etwas gestolpert, das ich noch nie gesehen habe. Im Quelltext der TODO-Beispielanwendung von Backbone.js ( Backbone TODO Beispiel ) hatten sie ihre Vorlagen innerhalb einer <script type = "text/template"></script> der Code enthält, der wie ein PHP-Code aussieht, aber JavaScript-Tags enthält.

Kann mir das jemand erklären? Ist das legal?

Answer 1

Diese Skript-Tags sind eine gängige Methode zur Implementierung von Template-Funktionen (wie in PHP), aber auf der Client-Seite.

Wenn Sie den Typ auf "text/template" setzen, handelt es sich nicht um ein Skript, das der Browser verstehen kann, so dass der Browser es einfach ignoriert. So können Sie dort alles Mögliche einfügen, was dann später extrahiert und von einer Vorlagenbibliothek zur Erzeugung von HTML-Schnipseln verwendet werden kann.

Backbone zwingt Sie nicht dazu, eine bestimmte Template-Bibliothek zu verwenden - es gibt eine ganze Reihe davon: Schnurrbart , Haml , Öko , Google Closure-Vorlage usw. (in dem von Ihnen verlinkten Beispiel wird die Option unterstrich.js ). Diese verwenden eine eigene Syntax, die Sie innerhalb dieser Skript-Tags schreiben können.

Answer 2

Das ist legitim und sehr praktisch!

Versuchen Sie dies:

<script id="hello" type="text/template">
  Hello world
</script>
<script>
  alert($('#hello').html());
</script>

Mehrere Javascript-Templating-Bibliotheken verwenden diese Technik. Handlebars.js ist ein gutes Beispiel.

Answer 3

Durch Setzen des Skript-Tags type andere als text/javascript wird der Browser den internen Code des Skript-Tags nicht ausführen. Dies wird als Mikrovorlage bezeichnet. Dieses Konzept ist weit verbreitet in Single Page Application (aka SPA) verwendet.

<script type="text/template">I am a Micro template. 
  I am going to make your web page faster.</script>

Bei der Mikrovorlage ist der Typ des Skript-Tags text/template . Es ist sehr gut von Jquery Schöpfer John Resig erklärt http://ejohn.org/blog/javascript-micro-templating/

Answer 4

<script type = “text/template”> … </script> ist obsolet. Verwenden Sie <template> Tag stattdessen.

Answer 5

Um die Antwort von Box9 zu ergänzen:

Backbone.js ist abhängig von underscore.js, das seinerseits John Resigs ursprüngliche Microtemplates implementiert.

Wenn Sie sich für die Verwendung von Backbone.js mit Rails entscheiden, sollten Sie sich unbedingt das Jammit-Gem ansehen. Es bietet eine sehr saubere Möglichkeit zur Verwaltung von Asset-Paketen für Vorlagen. http://documentcloud.github.com/jammit/#jst

Standardmäßig verwendet Jammit auch die Microtemplates von JResig, aber es erlaubt Ihnen auch, die Template-Engine zu ersetzen.