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

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?

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.

¡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.

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/

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.

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>

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

jQuery Templates es un ejemplo de algo que usa este método para almacenar HTML que no se representará directamente (ese es el punto completo) dentro de otro HTML: http://api.jquery.com/jQuery.template/