Explication de <script type="text/template"> ... </script>

Question

Je viens de tombé sur quelque chose que je n'ai jamais vu avant. Dans la source de Backbone.js l'exemple de la TODO application (épine Dorsale TODO Exemple), ils avaient leurs modèles à l'intérieur d'un <script type = "text/template"></script>, qui contient le code qui ressemble à quelque chose hors de PHP, mais avec des balises JavaScript.

Quelqu'un peut-il m'expliquer cela? Est-ce légitime?

Answer 1

Ces balises de script sont un moyen commun pour mettre en œuvre la fonctionnalité de création de modèles (comme en PHP) mais sur le côté client.

En définissant le type de texte "/template", ce n'est pas un script que le navigateur peut comprendre, et donc le navigateur sera tout simplement l'ignorer. Cela vous permet de mettre n'importe quoi là, qui peuvent ensuite être extraites plus tard et utilisé par une bibliothèque de templates pour générer des bouts de code HTML.

Épine dorsale ne vous force pas à utiliser tout particulier de template library - il ya un peu là-bas: Moustache, Haml, Eco, et ainsi de suite (celui utilisé dans l'exemple vous-même liée à underscore.js). Ces utiliseront leur propre syntaxe pour que vous puissiez écrire à l'intérieur de ces balises script.

Answer 2

Il est légitime et très pratique!

Essayez ceci:

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

Plusieurs Javascript templating bibliothèques utilisent cette technique. Handlebars.js est un bon exemple.

Answer 3

Par paramètre de balise de script type autres qu' text/javascript, le navigateur n'exécute pas le code interne de la balise script. Ceci est appelé micro-modèle. Ce concept est largement utilisé dans les Single page application(aka SPA).

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

Pour les micro-modèle, le type de la balise script est - text/template. Il est très bien expliqué par Jquery créateur John Resig http://ejohn.org/blog/javascript-micro-templating/

Answer 4

Pour ajouter à Box9 de réponse:

Backbone.js dépend de underscore.js qui lui-même met en œuvre John Resig d'origine microtemplates.

Si vous décidez d'utiliser Backbone.js avec Rails, assurez-vous de vérifier la Jammit gem. Il offre un très propre façon de gérer les actifs de l'emballage pour les modèles. http://documentcloud.github.com/jammit/#jst

Par défaut Jammit utilise également JResig de microtemplates, mais il vous permet également de remplacer le moteur de template.

Answer 5

C'est une façon d'ajouter du texte au format HTML sans qu'il soit rendu ou normalisée.

Ce n'est pas différent que d'ajouter, comme:

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