Explicação de <script type = "text / template">… </script>

Acabei de me deparar com algo que nunca vi antes. Na fonte do aplicativo TODO de exemplo do Backbone.js ( Exemplo do TODO do Backbone ), eles tinham seus modelos dentro de um <script type = "text/template"></script>, que continha um código que se parece com algo fora do PHP, mas com tags JavaScript.

Alguém pode me explicar isso? Isso é legítimo?

Essas tags de script são uma maneira comum de implementar a funcionalidade de modelos (como no PHP), mas no lado do cliente.

Ao definir o tipo como "texto / modelo", não é um script que o navegador possa entender e, portanto, o navegador simplesmente o ignora. Isso permite que você coloque qualquer coisa lá, que pode ser extraído posteriormente e usado por uma biblioteca de modelos para gerar trechos de HTML.

O backbone não força você a usar nenhuma biblioteca de modelos em particular - existem algumas por aí: bigode , haml , eco , modelo do Google Closure e assim por diante (a usada no exemplo ao qual você vinculou é underscore.js ). Eles usarão sua própria sintaxe para você escrever nessas tags de script.

É legítimo e muito útil!

Tente o seguinte:

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

Várias bibliotecas de modelos Javascript usam essa técnica. O Handlebars.js é um bom exemplo.

Ao definir uma tag de script typediferente de text/javascript, o navegador não executará o código interno da tag de script. Isso é chamado de micro modelo. Esse conceito é amplamente usado no aplicativo de página única (também conhecido como SPA).

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

Para micro modelo, o tipo da tag de script é text/template. Isso é muito bem explicado pelo criador do Jquery, John Resig, http://ejohn.org/blog/javascript-micro-templating/

Para adicionar à resposta do Box9:

O Backbone.js depende do underscore.js, que implementa os microtemplates originais de John Resig.

Se você decidir usar o Backbone.js com o Rails, verifique a gema Jammit. Ele fornece uma maneira muito limpa de gerenciar o empacotamento de ativos para modelos. http://documentcloud.github.com/jammit/#jst

Por padrão, o Jammit também usa os microtemplates do JResig, mas também permite substituir o mecanismo de modelagem.

É uma maneira de adicionar texto ao HTML sem que seja renderizado ou normalizado.

Não é diferente de adicioná-lo como:

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

<script type = “text/template”> … </script>é obsoleto. Use a <template>tag.

O jQuery Templates é um exemplo de algo que usa esse método para armazenar HTML que não será renderizado diretamente (esse é o ponto principal) dentro de outro HTML: http://api.jquery.com/jQuery.template/