468

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?

Jim Hunziker
  • 11,545
  • 7
  • 50
  • 57
Matt
  • 19,783
  • 24
  • 71
  • 113
  • Great question and answer. I just ran across this trick in the new YUI App Framework code: http://new.yuilibrary.com/yui/docs/app/app-todo.html – mjhm Aug 18 '11 at 20:53
  • 4
    What about `type="text/tcl"` which I saw [in the W3C doc](http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.2.3)? How to use it? (Should I ask another question?) – L01man Jun 11 '12 at 14:11
  • 3
    @L01man yes, you should ask another question. – Nate Glenn Feb 17 '13 at 22:05
  • mjhm's YUI link now at: http://yuilibrary.com/yui/docs/app/app-todo.html – gpvos Jun 25 '15 at 12:57

7 Answers7

420

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.

rolling stone
  • 464
  • 1
  • 8
  • 21
David Tang
  • 86,742
  • 28
  • 159
  • 145
  • 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 06 '11 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 06 '11 at 10:03
  • 7
    hi, different Matt here. Would – Matt Apr 05 '12 at 22:16
  • 1
    it does not work when there is `` in your text inside text/template – lidaobing Oct 29 '12 at 05:15
  • FYI, "text/template" is not a valid media type according to the IANA http://www.iana.org/assignments/media-types/text – dirtside May 01 '13 at 20:25
  • 17
    Looking forward to `` tag. http://www.html5rocks.com/en/tutorials/webcomponents/template/ & http://caniuse.com/#search=template – Volker E. Jun 07 '13 at 21:07
  • 1
    The template must be inline within the HTML; it is not possible to access the contents of a script linked with the `src` attribute. http://stackoverflow.com/questions/12035839/how-to-outsource-a-template-js-to-a-different-file-when-using-handlebars-js – Andrew Lundin Oct 19 '13 at 06:08
  • 6
    Hello from the future. ` – Victor Zamanian Mar 28 '17 at 18:22
  • @VictorZamanian Hello from further in the future, if you're using a templating framework that has custom indicators for variables the `template` tag will probably fail because the browser tries to parse it into a `DocumentFragment` :/ – GammaGames Dec 12 '19 at 22:34
119

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.

Rimian
  • 32,654
  • 13
  • 106
  • 109
  • 5
    How would you do this alert in raw javascript with jquery? – tremor Oct 09 '13 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 '13 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 '13 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 '13 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. – Jeroen Landheer Aug 18 '15 at 07:56
  • Oh my word, I've been looking for this. – bodacious Sep 05 '16 at 18:48
27

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/

Fizer Khan
  • 71,869
  • 26
  • 133
  • 149
13

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.

Andrew De Andrade
  • 3,506
  • 5
  • 30
  • 35
12

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

superluminary
  • 38,944
  • 21
  • 142
  • 143
Reza Salarmehr
  • 418
  • 3
  • 4
  • 10
    ` – ovinophile Aug 23 '14 at 06:23
  • 89
    In 5 years time use the – superluminary Sep 30 '14 at 13:06
  • 13
    – dagnelies Sep 30 '14 at 13:16
  • 1
    This is a part of WebComponents and we can already use it with polymer in all browsers, or natively with some browser. – pdem Jan 21 '15 at 12:46
  • if you use webcomponents.js template tag will work in all browsers that you may need to support since IE8 is not supported even by Microsoft https://github.com/webcomponents/webcomponentsjs – thecotne May 20 '15 at 09:00
  • 13
    Do NOT use – dkellner Jun 19 '15 at 14:30
  • 3
    2 years since the answer posted, IE11 itself is an obsolete technology, and Microsoft has move to Edge instead, which support ` – Yeo Oct 09 '16 at 00:56
  • 2
    if you would like to use the template tag you can create the tag for IE browsers: ```html ``` – cbertelegni Apr 03 '17 at 18:02
  • 3
    After 5 years, you can't still use ` – wonsuc Oct 22 '19 at 01:28
12

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>
Kernel James
  • 2,830
  • 18
  • 17
  • 32
    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 '13 at 22:09
  • 13
    @LocalPCGuy thats not true, including `` 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 '14 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 '14 at 23:41
  • 4
    @LocalPCGuy yeah I think those two can be used interchangebly. If your template has the line `` you can't use it inside a script tag, so you can use the textarea then, and vice versa. – vikki Apr 13 '14 at 07: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 08 '17 at 23:07
  • However something like an `` would not care about being hidden via `display:none`, and could still mess up your submitted form. – luckydonald Jun 02 '20 at 11:09
3

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/

Niels Heidenreich
  • 1,197
  • 1
  • 8
  • 19