Explicación de <script type = "text / template"> ... </script>


456

Me topé con algo que nunca había visto antes. En la fuente de la aplicación TODO de ejemplo de Backbone.js ( Ejemplo TODO de Backbone ) tenían sus plantillas dentro de un <script type = "text/template"></script>código que parece algo salido de PHP pero con etiquetas JavaScript.

¿Alguien puede explicarme esto? ¿Es esto legítimo?


Gran pregunta y respuesta. Acabo de encontrar este truco en el nuevo código del Marco de la Aplicación YUI: new.yuilibrary.com/yui/docs/app/app-todo.html
mjhm

44
¿Qué pasa con type="text/tcl"lo que vi en el documento W3C ? ¿Cómo usarlo? (¿Debo hacer otra pregunta?)
L01man

3
@ L01man sí, deberías hacer otra pregunta.
Nate Glenn

Enlace YUI de mjhm ahora en: yuilibrary.com/yui/docs/app/app-todo.html
gpvos

Respuestas:


414

Esas etiquetas de script son una forma común de implementar la funcionalidad de plantillas (como en PHP) pero en el lado del cliente.

Al establecer el tipo en "texto / plantilla", no es un script que el navegador pueda entender, por lo que el navegador simplemente lo ignorará. Esto le permite poner cualquier cosa allí, que luego se puede extraer más tarde y utilizar por una biblioteca de plantillas para generar fragmentos de HTML.

Espina dorsal no le obliga a utilizar cualquier biblioteca de plantillas en particular - hay bastantes por ahí: bigote , Haml , Eco , plantilla de Google de cierre , y así sucesivamente (la utilizada en el ejemplo que es vinculado a underscore.js ). Estos usarán su propia sintaxis para que puedas escribir dentro de esas etiquetas de script.


22
@ Matt, exactamente eso. Al mismo tiempo, es fácil recuperar el texto completo nuevamente .innerHTML, por lo tanto, es una práctica común ahora entre los motores de plantillas.
David Tang

1
Bueno, ¿no es solo una noticia fantástica! He estado buscando una solución como esta ... ¡Gracias por su respuesta y seguimiento!
Matt

77
hola, diferente Matt aquí. ¿<Script type = "text / template"> pasaría una prueba de verificación html?
Matt


55
Hola desde el futuro <template>está aquí, pero los sitios todavía usan esta técnica, como reddit.com. : F
Victor Zamanian

114

¡Es legítimo y muy útil!

Prueba esto:

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

Varias bibliotecas de plantillas Javascript utilizan esta técnica. Handlebars.js es un buen ejemplo.


55
¿Cómo haría esta alerta en javascript sin procesar con jquery?
temblor

3
@tremor ¿Quieres decir en javascript sin formato sin jquery? Algo así como: var el = document.getElementById ('hola'); var html = el.textContent; alerta (html); (necesitará investigar más sobre el procesamiento del texto de las etiquetas de script en IE)
SgtPooki

@SgtPooki ya quise decir sin, gracias por la respuesta. Lo que realmente me gustaría hacer es enviar esa secuencia de comandos a un archivo externo y obtenerla, pero descubrí que eso no es realmente posible ... así que me estoy sumergiendo en AJAX y socket.io ahora.
temblor

@tremor, es posible que no entienda exactamente lo que está tratando de hacer, pero definitivamente es posible tomar archivos externos dinámicamente, para ejecutarlos o analizarlos como plantilla. Echa un vistazo a requirejs.
SgtPooki

@tremor Si desea extraer archivos externos dinámicamente, prefiero usar XHR que etiquetas de script. XHR también funciona con respuestas HTML simples ... o cualquier otra cosa para el caso.
Jeroen Landheer

26

Al establecer una etiqueta de script typediferente a text/javascript, el navegador no ejecutará el código interno de la etiqueta de script. Esto se llama micro plantilla. Este concepto es ampliamente utilizado en la aplicación de página única (también conocido como SPA).

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

Para micro plantilla, el tipo de etiqueta de script es text/template. Está muy bien explicado por el creador de Jquery John Resig http://ejohn.org/blog/javascript-micro-templating/


Gran recurso que incluiste. Ese enlace me enseñó mucho.
rocktheartsm4l

13

Para agregar a la respuesta de Box9:

Backbone.js depende de underscore.js, que implementa las microtemplates originales de John Resig.

Si decides usar Backbone.js con Rails, asegúrate de ver la gema Jammit. Proporciona una forma muy limpia de administrar el empaquetado de activos para plantillas. http://documentcloud.github.com/jammit/#jst

Por defecto, Jammit también usa las microtemplates de JResig, pero también le permite reemplazar el motor de plantillas.


Para agregar, DocumentCloud, que proporciona Jammit, es la misma compañía que desarrolló Backbone y Underscore.
Ceasar Bautista

12

Es una forma de agregar texto a HTML sin que sea renderizado o normalizado.

No es diferente a agregarlo como:

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

32
Es diferente, un área de texto todavía insertará esos elementos en el DOM y buscará cualquier activo externo (como imágenes) solicitado. Una etiqueta de script no lo hará.
LocalPCGuy

13
@LocalPCGuy eso no es cierto, incluso <img src="image.jpg">dentro de un área de texto no hará que el navegador se recupere image.jpg, el navegador sabe que el contenido dentro de un área de texto no debe representarse.
vikki

55
@vikki woops, tienes razón, textarea puede ser uno de los pocos elementos que podría ser un reemplazo viable para la plantilla de etiquetas de script.
LocalPCGuy

44
@LocalPCGuy sí, creo que esos dos se pueden usar indistintamente Si su plantilla tiene la línea, </script>no puede usarla dentro de una etiqueta de script, por lo que puede usar el área de texto y viceversa.
vikki

2
Sí ... Antes de la etiqueta de la plantilla y antes del script type = text / template, creo que todos lo hicimos con textarea. Es lo mismo con los iframes cuando no teníamos ajax.
dkellner

11

<script type = “text/template”> … </script>es obsoleto. Use la <template>etiqueta en su lugar.


99
<template>Internet Explorer todavía no admite la etiqueta a partir de IE 11.
ovinophile

87
En 5 años use la etiqueta <template>.
superluminary

13
<script type = "text / template"> puede contener cualquier cosa, no se analizan. Por otro lado, las etiquetas <template> se analizan en un DOM, por lo tanto, necesita un HTML válido. Por lo general, esto significa que la primera se mantendrá como plantilla intacta, mientras que la segunda eliminará las partes no compatibles con HTML y romperá la plantilla. ... por supuesto, solo es un problema si usas motores de plantillas como el bigote o similares.
Dagnelies

10
NO use la etiqueta <template> y no tome su decisión basándose en que otra cosa sea "obsoleta". Esta no es la Semana de la Moda de Milán, si algo funciona y es técnicamente apropiado, se puede usar :) Ahora de verdad: la etiqueta <template> todavía no es compatible en IE y Opera Mini (según CanIUse), y la etiqueta <script> será mantenga exactamente lo que le da, en lugar de un div oculto o cualquier otra etiqueta que pueda perder sus espacios en blanco o comentarios.
dkellner

3
2 años después de la publicación de la respuesta, IE11 en sí es una tecnología obsoleta, y Microsoft se ha mudado a Edge, que es compatible <template>. La mayoría de los principales navegadores de escritorio son compatibles con esta <template>etiqueta. Recomiendo usarlo a partir de ahora. developer.mozilla.org/en/docs/Web/HTML/Element/…
Yeo

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.