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

Je suis juste tombé sur quelque chose que je n'avais jamais vu auparavant. Dans la source de l'exemple d'application TODO de Backbone.js (exemple TODO Backbone ), ils avaient leurs modèles à l'intérieur d'un <script type = "text/template"></script>, qui contenait du code qui ressemble à quelque chose de PHP mais avec des balises JavaScript.

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

Ces balises de script sont un moyen courant d'implémenter des fonctionnalités de modèles (comme en PHP) mais côté client.

En définissant le type sur "texte / modèle", ce n'est pas un script que le navigateur peut comprendre, et donc le navigateur l'ignorera simplement. Cela vous permet de mettre n'importe quoi dedans, qui peut ensuite être extrait plus tard et utilisé par une bibliothèque de modèles pour générer des extraits HTML.

Backbone ne vous oblige pas à utiliser une bibliothèque de modèles particulière - il y en a beaucoup: Moustache , Haml , Eco , modèle de fermeture Google , etc. (celui utilisé dans l'exemple que vous avez lié est underscore.js ). Ceux-ci utiliseront leur propre syntaxe pour que vous puissiez écrire dans ces balises de script.

C'est légitime et très pratique!

Essaye ça:

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

Plusieurs bibliothèques de modèles Javascript utilisent cette technique. Handlebars.js est un bon exemple.

En définissant une balise de script typeautre que text/javascript, le navigateur n'exécutera pas le code interne de la balise de script. C'est ce qu'on appelle le micro modèle. Ce concept est largement utilisé dans les applications à page unique (aka SPA).

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

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

Pour ajouter à la réponse de Box9:

Backbone.js dépend de underscore.js, qui implémente lui-même les microtemplates originaux de John Resig.

Si vous décidez d'utiliser Backbone.js avec Rails, assurez-vous de consulter la gemme Jammit. Il fournit un moyen très propre de gérer l'empaquetage des actifs pour les modèles. http://documentcloud.github.com/jammit/#jst

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

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

Ce n'est pas différent que de l'ajouter comme:

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

<script type = “text/template”> … </script>est obsolète. Utilisez <template>plutôt la balise.

jQuery Templates est un exemple de quelque chose qui utilise cette méthode pour stocker du HTML qui ne sera pas rendu directement (c'est tout le point) dans un autre HTML: http://api.jquery.com/jQuery.template/