web-dev-qa-db-ger.com

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

Ich bin nur auf etwas gestoßen, das ich noch nie gesehen habe. In der Quelle der TODO-Beispielanwendung von Backbone.js ( Backbone TODO Example ) befanden sich die Vorlagen in einem <script type = "text/template"></script>, der Code enthielt, der wie etwas aus PHP aber mit JavaScript-Tags aussieht.

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

438
Matt

Diese Skript-Tags sind eine übliche Methode, um Vorlagenfunktionen (wie in PHP) zu implementieren, jedoch auf der Clientseite.

Wenn Sie den Typ auf "text/template" setzen, ist dies kein Skript, das der Browser verstehen kann, und der Browser ignoriert es einfach. Auf diese Weise können Sie alles einfügen, was später extrahiert und von einer Vorlagenbibliothek zum Generieren von HTML-Snippets verwendet werden kann.

Backbone zwingt Sie nicht dazu, eine bestimmte Vorlagenbibliothek zu verwenden - es gibt einige davon: Moustache , Haml , Eco , - Google Closure-Vorlage und so weiter (das Beispiel, mit dem Sie verlinkt haben, lautet nderscore.js ). Diese verwenden ihre eigene Syntax, damit Sie in diese Skript-Tags schreiben können.

400
David Tang

Es ist echt und sehr praktisch!

Versuche dies:

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

Mehrere JavaScript-Vorlagenbibliotheken verwenden diese Technik. Handlebars.js ist ein gutes Beispiel.

113
Rimian

Wenn Sie ein anderes Skript-Tag type als text/javascript Festlegen, führt der Browser den internen Code des Skript-Tags nicht aus. Dies nennt man Mikrovorlage. Dieses Konzept wird häufig in Einzelseitenanwendungen (auch bekannt als SPA) verwendet.

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

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

26
Fizer Khan

So fügen Sie die Antwort von Box9 hinzu:

Backbone.js ist abhängig von underscore.js, das selbst die ursprünglichen Mikrotemplates von John Resig implementiert.

Wenn Sie Backbone.js mit Rails verwenden möchten, sollten Sie unbedingt das Jammit-Juwel ausprobieren. Es bietet eine sehr übersichtliche Möglichkeit zum Verwalten von Asset-Paketen für Vorlagen. http://documentcloud.github.com/jammit/#jst

Standardmäßig verwendet Jammit auch JResigs Mikrovorlagen, Sie können jedoch auch die Vorlagen-Engine ersetzen.

13

Es ist eine Möglichkeit, HTML-Text hinzuzufügen, ohne dass dieser gerendert oder normalisiert wird.

Es ist nicht anders als das Hinzufügen wie:

 <textarea style="display:none"><span>{{name}}</span></textarea>
12
Kernel James

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

10
Reza Salarmehr

jQuery-Vorlagen ist ein Beispiel für etwas, das diese Methode zum Speichern von HTML verwendet, das nicht direkt (das ist der springende Punkt) in anderem HTML gerendert wird: http://api.jquery.com/jQuery.template/ =

3