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


456

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?


Grande question et réponse. Je viens de rencontrer cette astuce dans le nouveau code YUI App Framework: new.yuilibrary.com/yui/docs/app/app-todo.html
mjhm

4
Qu'en est-il de type="text/tcl"ce que j'ai vu dans le document W3C ? Comment l'utiliser? (Dois-je poser une autre question?)
L01man

3
@ L01man oui, vous devriez poser une autre question.
Nate Glenn

Le lien YUI de mjhm maintenant à: yuilibrary.com/yui/docs/app/app-todo.html
gpvos

Réponses:


414

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.


22
@Matt, c'est exactement ça. Dans le même temps, il est facile de récupérer à nouveau le texte intégral à l'aide .innerHTML, d'où la pratique courante parmi les moteurs de création de modèles.
David Tang

1
Et bien, ce n'est pas que des nouvelles fantastiques! Je cherchais une solution comme celle-ci .. Merci pour votre réponse et votre suivi!
Matt

7
salut, Matt différent ici. <Script type = "text / template"> réussirait-il un test de vérification html?
Matt


5
Bonjour du futur. <template>est là, mais les sites utilisent toujours cette technique, comme reddit.com. : F
Victor Zamanian

114

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.


5
Comment feriez-vous cette alerte en javascript brut avec jquery?
tremblements

3
@tremor Voulez-vous dire en javascript brut sans jquery? Quelque chose comme: var el = document.getElementById ('hello'); var html = el.textContent; alerte (html); (vous devrez approfondir le traitement du texte des balises de script dans IE)
SgtPooki

@SgtPooki ya je voulais dire sans, merci pour la réponse. Ce que j'aimerais vraiment faire, c'est récupérer ce script dans un fichier externe et l'obtenir, mais j'ai trouvé que ce n'était pas vraiment possible ... alors je plonge dans AJAX et socket.io maintenant.
tremblements du

@tremor, je ne comprends peut-être pas exactement ce que vous essayez de faire, mais saisir des fichiers externes de manière dynamique, pour les exécuter ou les analyser comme modèle, est certainement possible. Découvrez requirejs.
SgtPooki

@tremor Si vous souhaitez extraire des fichiers externes de manière dynamique, je préfère utiliser XHR que les balises de script. XHR fonctionne également avec des réponses HTML simples ... ou toute autre chose d'ailleurs.
Jeroen Landheer

26

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/


Grande ressource que vous avez incluse. Ce lien m'a beaucoup appris.
rocktheartsm4l

13

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.


Pour ajouter, DocumentCloud, qui fournit Jammit, est la même société qui a développé Backbone et Underscore.
Ceasar Bautista

12

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>

32
C'est différent, une zone de texte insérera toujours ces éléments dans le DOM et récupérera tous les actifs externes (comme les images) demandés. Une balise de script ne le fera pas.
LocalPCGuy

13
@LocalPCGuy ce n'est pas vrai, y compris à l' <img src="image.jpg">intérieur d'une zone de texte n'entraînera pas la récupération image.jpgdu navigateur, le navigateur sait que le contenu à l'intérieur d'une zone de texte n'est pas destiné à être rendu.
vikki

5
@vikki woops, vous avez raison, textarea peut être l'un des rares éléments qui serait un remplacement viable pour la création de modèles de balises de script.
LocalPCGuy

4
@LocalPCGuy ouais je pense que ces deux peuvent être utilisés de manière interchangeable. Si votre modèle a la ligne, </script>vous ne pouvez pas l'utiliser dans une balise de script, vous pouvez donc utiliser la zone de texte, et vice versa.
vikki

2
Oui ... Avant la balise de modèle et avant le type de script = texte / modèle, nous l'avons tous fait avec textarea, je crois. C'est la même chose avec les iframes quand nous n'avions pas d'ajax.
dkellner

11

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


9
<template>tag n'est toujours pas pris en charge par Internet Explorer à partir d'IE 11.
ovinophile

87
Dans 5 ans, utilisez la balise <template>.
superluminaire

13
<script type = "text / template"> peut contenir n'importe quoi, ils ne sont pas analysés. D'un autre côté, les balises <template> sont analysées dans un DOM, donc doivent valider du HTML. Habituellement, cela signifie que le premier sera conservé en tant que modèle intact, tandis que le second supprimera les pièces non conformes à HTML et cassera le modèle. ... bien sûr, ce n'est un problème que si vous utilisez des moteurs de modèle comme moustache ou similaires.
dagnelies

10
N'utilisez PAS la balise <template> et ne prenez pas votre décision en fonction du fait que quelque chose d'autre est "obsolète". Ce n'est pas la Milan Fashion Week, si quelque chose fonctionne et est techniquement approprié, il peut être utilisé :) Maintenant pour de vrai: la balise <template> n'est toujours pas prise en charge dans IE et Opera Mini (selon CanIUse), et la balise <script> sera conservez exactement ce que vous lui donnez, par opposition à un div caché ou à toute autre balise qui pourrait perdre vos espaces ou vos commentaires.
dkellner

3
2 ans après la publication de la réponse, IE11 lui-même est une technologie obsolète, et Microsoft a plutôt opté pour Edge, qui le prend en charge <template>. La plupart des principaux navigateurs de bureau prennent en charge cette <template>balise. Je recommande fortement de l'utiliser dès maintenant. developer.mozilla.org/en/docs/Web/HTML/Element/…
Yeo

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.