javascript - Explicación de<tipo de script="texto/plantilla">…</script>

templates types

Question

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

¿Puede alguien explicarme esto? ¿Esto es legítimo?

Answer 1

¡Es legítimo y muy práctico!

Prueba esto:

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

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

Answer 2

Al configurar un type etiqueta de script diferente al 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 una sola página (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 la micro plantilla, el tipo de etiqueta del script es text/template . Está muy bien explicado por el creador de Jquery, John Resig, http://ejohn.org/blog/javascript-micro-templating/

Answer 3

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>

Answer 4

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 configurar 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 colocar cualquier cosa allí, que luego se puede extraer y usar una biblioteca de plantillas para generar fragmentos de código HTML.

Backbone no te obliga a utilizar ninguna biblioteca de plantillas en particular, hay bastantes: Mustache , Haml , Eco , plantilla de cierre de Google , etc. (la que se usa en el ejemplo al que vinculas es underscore.js ). Estos usarán su propia sintaxis para que usted escriba dentro de esas etiquetas de script.

Answer 5

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

Answer 6

Para agregar a la respuesta de Box9:

Backbone.js depende de underscore.js, que a su vez implementa las microtemplacas originales de John Resig.

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

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

Answer 7

<script type = “text/template”> … </script> está obsoleto. Use la etiqueta <template> lugar.