Spiegazione di <script type = "text / template"> ... </script>

Mi sono appena imbattuto in qualcosa che non avevo mai visto prima. Nell'origine dell'applicazione TODO di esempio di Backbone.js (esempio TODO di backbone ) avevano i loro modelli all'interno di un file <script type = "text/template"></script>, che conteneva un codice che sembra uscito da PHP ma con tag JavaScript.

Qualcuno può spiegarmelo? È legittimo?

Quei tag di script sono un modo comune per implementare la funzionalità di template (come in PHP) ma sul lato client.

Impostando il tipo su "testo / modello", non è uno script che il browser può capire, quindi il browser semplicemente lo ignorerà. Ciò ti consente di inserire qualsiasi cosa, che può essere successivamente estratta e utilizzata da una libreria di modelli per generare frammenti HTML.

Backbone non ti costringe a usare nessuna particolare libreria di template - ce ne sono parecchi là fuori: Moustache , Haml , Eco , template di Google Closure e così via (quello usato nell'esempio a cui ti sei collegato è underscore.js ). Questi useranno la propria sintassi per scrivere all'interno di quei tag di script.

È legittimo e molto utile!

Prova questo:

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

Diverse librerie di template Javascript utilizzano questa tecnica. Handlebars.js è un buon esempio.

Impostando un tag di script typediverso da text/javascript, il browser non eseguirà il codice interno del tag di script. Questo si chiama micro modello. Questo concetto è ampiamente utilizzato nell'applicazione a pagina singola (aka SPA).

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

Per micro template, il tipo di tag script è text/template. È molto ben spiegato dal creatore di Jquery John Resig http://ejohn.org/blog/javascript-micro-templating/

Per aggiungere alla risposta di Box9:

Backbone.js dipende da underscore.js, che a sua volta implementa i microtemplate originali di John Resig.

Se decidi di utilizzare Backbone.js con Rails, assicurati di dare un'occhiata alla gemma Jammit. Fornisce un modo molto pulito per gestire il packaging delle risorse per i modelli. http://documentcloud.github.com/jammit/#jst

Per impostazione predefinita, Jammit utilizza anche i microtemplate di JResig, ma consente anche di sostituire il motore di template.

È un modo per aggiungere testo in HTML senza renderlo o normalizzare.

Non è diverso dall'aggiungerlo come:

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

<script type = “text/template”> … </script>è obsoleto. Usa <template>invece il tag.

jQuery Templates è un esempio di qualcosa che utilizza questo metodo per archiviare HTML che non verrà visualizzato direttamente (ovvero l'intero punto) all'interno di altri HTML: http://api.jquery.com/jQuery.template/