Explanation of script type text template script

Question

I just stumbled upon something I ve never seen before  In the source of Backbone js s example TODO application  Backbone TODO Example  they had their templates inside a  lt script type    text template  gt  lt  script gt   which contained code that looks like something out of PHP but with JavaScript tags   Can someone explain this to me  Is this legit

User · Answer

By setting script tag type other than text javascript  browser will not execute the internal code of script tag  This is called micro template  This concept is widely used in Single page application aka SPA     lt script type  text template  gt I am a Micro template     I am going to make your web page faster  lt  script gt    For micro template  type of the script tag is text template  It is very well explained by Jquery creator John Resig http   ejohn org blog javascript-micro-templating

User · Answer

jQuery Templates is an example of something that uses this method to store HTML that will not be rendered directly  that   s the whole point  inside other HTML  http   api jquery com jQuery template

User · Answer

It s legit and very handy    Try this    lt script id  hello  type  text template  gt    Hello world  lt  script gt   lt script gt    alert     hello   html      lt  script gt    Several Javascript templating libraries use this technique  Handlebars js is a good example

User · Answer

It s a way of adding text to HTML without it being rendered or normalized   It s no different than adding it like     lt textarea style  display none  gt  lt span gt   name   lt  span gt  lt  textarea gt

User · Answer

To add to Box9 s answer   Backbone js is dependent on underscore js  which itself implements John Resig s original microtemplates   If you decide to use Backbone js with Rails  be sure to check out the Jammit gem  It provides a very clean way to manage asset packaging for templates   http   documentcloud github com jammit  jst  By default Jammit also uses JResig s microtemplates  but it also allows you to replace the templating engine

User · Answer

Those script tags are a common way to implement templating functionality  like in PHP  but on the client side   By setting the type to  text template   it s not a script that the browser can understand  and so the browser will simply ignore it  This allows you to put anything in there  which can then be extracted later and used by a templating library to generate HTML snippets   Backbone doesn t force you to use any particular templating library - there are quite a few out there  Mustache  Haml  Eco Google Closure template  and so on  the one used in the example you linked to is underscore js   These will use their own syntax for you to write within those script tags

User · Answer

lt script type      text template    gt       lt  script gt  is obsolete  Use  lt template gt  tag instead

[javascript] Explanation of <script type = "text/template"> ... </script>

Examples related to javascript

Examples related to templates

Examples related to types

Examples related to backbone.js

Examples related to underscore.js