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

456

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?

Matt
fonte
Ótima pergunta e resposta. Eu corri através deste truque no novo código YUI App Framework: new.yuilibrary.com/yui/docs/app/app-todo.html
mjhm
4
E o type="text/tcl"que eu vi no documento do W3C ? Como usá-lo? (Devo fazer outra pergunta?)
L01man
3
@ L01man sim, você deve fazer outra pergunta.
Nate Glenn
Link YUI do mjhm agora em: yuilibrary.com/yui/docs/app/app-todo.html
gpvos

Respostas:

414

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.

David Tang
fonte
22
@ Matt, exatamente isso. Ao mesmo tempo, é fácil recuperar o texto completo novamente usando .innerHTML, portanto, é prática comum agora entre os mecanismos de modelagem.
David Tang
1
Bem, isso não é apenas uma notícia fantástica! Eu estou procurando uma solução como essa .. Obrigado pela sua resposta e acompanhamento!
Matt
7
oi, Matt diferente aqui. O <script type = "text / template"> passaria em um teste de verificação de html?
Matt
5
Olá do futuro. <template>está aqui, mas os sites ainda estão usando essa técnica, como o reddit.com. : F
Victor Zamanian
114

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

Rimian
fonte
5
Como você faria esse alerta em javascript bruto com jquery?
tremor
3
@tremor Você quer dizer em javascript bruto sem jquery? Algo como: var el = document.getElementById ('hello'); var html = el.textContent; alerta (html); (você precisará analisar mais detalhadamente o processamento do texto das tags de script no IE)
SgtPooki
@SgtPooki ya eu quis dizer sem, obrigado pela resposta. O que eu realmente gostaria de fazer é transferir esse script para um arquivo externo e obtê-lo, mas descobri que isso não é realmente possível ... então estou mergulhando no AJAX e no socket.io agora.
tremor
@tremor, eu posso não entender exatamente o que você está tentando fazer, mas pegar arquivos externos dinamicamente, para executar ou analisar como um modelo, é definitivamente possível. Confira requirejs.
SgtPooki
@tremor Se você deseja extrair arquivos externos dinamicamente, prefiro usar XHR do que tags de script. O XHR também funciona com respostas HTML simples ... ou qualquer outra coisa.
Jeroen Landheer
26

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/

Fizer Khan
fonte
Ótimo recurso que você incluiu. Esse link me ensinou muito.
rocktheartsm4l
13

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.

Andrew De Andrade
fonte
Para adicionar, o DocumentCloud, que fornece o Jammit, é a mesma empresa que desenvolveu o Backbone e o Underscore.
Ceasar Bautista
12

É 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>
Kernel James
fonte
32
É diferente, uma área de texto ainda inserirá esses elementos no DOM e buscará quaisquer ativos externos (como imagens) solicitados. Uma tag de script não.
LocalPCGuy
13
@LocalPCGuy isso não é verdade, inclusive <img src="image.jpg">dentro de uma área de texto não fará com que o navegador seja buscado image.jpg, o navegador sabe que o conteúdo dentro de uma área de texto não deve ser renderizado.
vikki
5
@vikki woops, você está correto, a área de texto pode ser um dos poucos elementos que seriam um substituto viável para o modelo de tag de script.
precisa saber é o seguinte
4
@LocalPCGuy sim, acho que esses dois podem ser usados ​​de forma intercambiável. Se o seu modelo tiver a linha, </script>você não poderá usá-lo dentro de uma tag de script; portanto, você poderá usar a área de texto e vice-versa.
vikki
2
Sim ... Antes da tag do modelo e antes do tipo de script = texto / modelo, todos nós fizemos isso com a área de texto, acredito. É a mesma coisa com iframes quando não tínhamos ajax.
dkellner
11

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

Reza Salarmehr
fonte
9
<template>tag ainda não é suportado pelo Internet Explorer a partir de IE 11.
ovinophile
87
Em 5 anos, use a tag <template>.
superluminary
13
<script type = "text / template"> pode conter qualquer coisa, eles não são analisados. Por outro lado, as tags <template> são analisadas em um DOM, portanto, é necessário validar o HTML. Geralmente, isso significa que o primeiro será mantido como modelo intacto, enquanto o segundo removerá as peças não compatíveis com html e quebrará o modelo. ... é claro, é apenas um problema se você usar mecanismos de modelo como bigode ou algo parecido.
precisa saber é o seguinte
10
NÃO use a tag <template> e não tome sua decisão com base em algo "obsoleto". Esta não é a Milan Fashion Week, se algo estiver funcionando e tecnicamente apropriado, pode ser usado :) Agora, de verdade: a tag <template> ainda não é suportada no IE e no Opera Mini (de acordo com o CanIUse), e a tag <script> será segure exatamente o que você fornecer, em oposição a uma div oculta ou qualquer outra tag que possa perder seus espaços em branco ou comentários.
dkellner
3
Dois anos desde a resposta, o IE11 é uma tecnologia obsoleta e a Microsoft mudou para o Edge, que oferece suporte <template>. A maioria dos principais navegadores de desktop suportam essa <template>tag. Eu recomendo fortemente usá-lo a partir de agora. developer.mozilla.org/en/docs/Web/HTML/Element/…
Yeo