487

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 <script type="text/template"></script>, which contained code that looks like something out of PHP but with JavaScript tags.

Can someone explain this to me? Is this legit?

4

7 Answers 7

439

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.

9
  • 22
    @Matt, exactly that. At the same time it's easy to retrieve the full text again using .innerHTML, hence it's common practice now among templating engines.
    – David Tang
    Feb 6, 2011 at 10:01
  • 1
    Well isn't that just fantastic news! I've been looking for a solution like this.. Thanks for your response and follow-up!
    – Matt
    Feb 6, 2011 at 10:03
  • 7
    hi, different Matt here. Would <script type="text/template"> pass an html verification test?
    – Matt
    Apr 5, 2012 at 22:16
  • 17
    Looking forward to <template /> tag. html5rocks.com/en/tutorials/webcomponents/template & caniuse.com/#search=template
    – Volker E.
    Jun 7, 2013 at 21:07
  • 6
    Hello from the future. <template> is here, but sites are still using this technique, such as reddit.com. :F Mar 28, 2017 at 18:22
124

It's legit and very handy!

Try this:

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

Several Javascript templating libraries use this technique. Handlebars.js is a good example.

6
  • 5
    How would you do this alert in raw javascript with jquery?
    – tremor
    Oct 9, 2013 at 21:01
  • 3
    @tremor Do you mean in raw javascript without jquery? Something like: var el = document.getElementById('hello'); var html = el.textContent; alert(html); (you'll need to look further into processing script tags' text in IE)
    – SgtPooki
    Oct 16, 2013 at 19:03
  • @SgtPooki ya i meant without, thanks for the answer. What I'd really like to do is src that script to an external file and get it, but I've found that's not really possible.. so I'm diving into AJAX and socket.io now.
    – tremor
    Oct 30, 2013 at 16:14
  • @tremor, I may not understand exactly what you're trying to do, but grabbing external files dynamically, to either run or parse as a template, is definitely possible. Check out requirejs.
    – SgtPooki
    Oct 31, 2013 at 16:08
  • @tremor If you want to pull external files dynamically, I'd rather use XHR than script tags. XHR also works with plain HTML responses... or anything else for that matter. Aug 18, 2015 at 7:56
30

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

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

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/

1
  • Great resource you included. That link taught me a lot. Aug 10, 2015 at 23:52
16

<script type = "text/template"> … </script> is obsolete. Use <template> tag instead.

10
  • 10
    <template> tag still isn't supported by Internet Explorer as of IE 11.
    – ovinophile
    Aug 23, 2014 at 6:23
  • 93
    In 5 years time use the <template> tag. Sep 30, 2014 at 13:06
  • 15
    <script type = “text/template”> can hold anything, they are not parsed. On the other hand, <template> tags are parsed into a DOM, hence needs to valid HTML. Usually, this means that the first will be kept as intact template, while the second will strip away non-html-compliant parts and break the template. ...of course, it's only a problem if you use template engines like mustache or the like.
    – dagnelies
    Sep 30, 2014 at 13:16
  • 16
    Do NOT use <template> tag, and don't make your decision based on something else being "obsolete". This is not the Milan Fashion Week, if something is working and technically appropriate, it can be used :) Now for real: <template> tag is still unsupported in IE and Opera Mini (according to CanIUse), and <script> tag will hold exactly what you give it, as opposed to a hidden div or any other tag that might lose your whitespaces or comments.
    – dkellner
    Jun 19, 2015 at 14:30
  • 4
    2 years since the answer posted, IE11 itself is an obsolete technology, and Microsoft has move to Edge instead, which support <template>. Most major desktop browser has support this <template> tag. I strongly recommend using it as of now. developer.mozilla.org/en/docs/Web/HTML/Element/…
    – Yeo
    Oct 9, 2016 at 0:56
14

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.

1
  • To add, DocumentCloud, which provides Jammit, is the same company that developed Backbone and Underscore.
    – Ceasar
    Feb 17, 2017 at 3:29
13

It's a way of adding text to HTML without it being rendered or normalized.

It's no different than adding it like:

<textarea style="display:none"><span>{{name}}</span></textarea>
6
  • 34
    It is different, a textarea will still insert those elements into the DOM and fetch any external assets (like images) requested. A script tag will not.
    – LocalPCGuy
    May 13, 2013 at 22:09
  • 13
    @LocalPCGuy thats not true, including <img src="image.jpg"> inside a textarea will not cause the browser to fetch image.jpg, the browser knows that the content inside a textarea is not meant to be rendered.
    – vikki
    Apr 11, 2014 at 17:35
  • 5
    @vikki woops, you are correct, textarea may be one of the few elements that would be a viable replacement for script tag templating.
    – LocalPCGuy
    Apr 11, 2014 at 23:41
  • 4
    @LocalPCGuy yeah I think those two can be used interchangebly. If your template has the line </script> you can't use it inside a script tag, so you can use the textarea then, and vice versa.
    – vikki
    Apr 13, 2014 at 7:30
  • 2
    Yup... Before template tag and before script type=text/template, we all did it with textarea, I believe. It's the same thing with iframes when we had no ajax.
    – dkellner
    Jan 8, 2017 at 23:07
4

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/

1

Not the answer you're looking for? Browse other questions tagged or ask your own question.