web-dev-qa-db-fra.com

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

Je suis tombé sur quelque chose que je n'ai jamais vu auparavant. Dans la source de l'application exemple TODO de Backbone.js ( Exemple Backbone TODO ), leurs modèles se trouvaient dans un <script type = "text/template"></script>, qui contenait du code qui ressemblait à quelque chose de PHP mais avec des balises JavaScript.

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

javascripttemplatestypesbackbone.jsunderscore.js
438
Matt

Ces balises de script sont un moyen courant d'implémenter la fonctionnalité de modélisation (comme en PHP), mais côté client.

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

Backbone ne vous oblige pas à utiliser une bibliothèque de modèles particulière - il en existe plusieurs: Moustache , Haml , Eco , - modèle de fermeture Google , etc. (celui utilisé dans l'exemple que vous avez associé est nderscore.js ). Ceux-ci utiliseront leur propre syntaxe pour vous permettre d'écrire au sein de ces balises de script.

400
David Tang

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.

113
Rimian

En définissant la balise de script type autre que text/javascript, le navigateur n'exécutera pas le code interne de la balise de script. Ceci est appelé micro modèle. Ce concept est largement utilisé dans les applications à page unique (ou 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 balise de script est text/template. Il est très bien expliqué par le créateur de Jquery, John Resig http://ejohn.org/blog/javascript-micro-templating/

26
Fizer Khan

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, n’oubliez pas de consulter la gemme Jammit. Il fournit un moyen très simple de gérer le conditionnement des actifs pour les modèles. http://documentcloud.github.com/jammit/#jst

Par défaut, Jammit utilise également les micro-modèles de JResig, mais il vous permet également de remplacer le moteur de modélisation.

13
Andrew De Andrade

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

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

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

<script type = “text/template”> … </script> est obsolète. Utilisez la balise <template> à la place.

10
Reza Salarmehr

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

3
Niels Heidenreich