Using text/html javascript templates in production code

Question

Has anyone implemented John Resig's micro-templating in production code? In particular I'd like to know if embedding the templates with <script type="text/html"> has caused any problems.

A bit more information: here's the sort of thing I'm worried about:

• My users are mostly in corporate environments - could an unusual proxy server mangle or strip out the templates
• The embedded templates seem to fail W3C validation. What if, for instance, the next version of IE decides it doesn't like them?

Answer 1

While I haven't used @jeresig's micro-templating, I did roll my own (can't link, not enough rep :-$) which uses <script type="text/html">. I've used it in a couple of (albeit basic) production sites without problems. The HTML5 spec itself refers to something similar (near the end of the section I've linked to). AFAIK the block only executes when the MIME type is a recognised script type, otherwise the block is just part of the document.

Answer 2

I have actually, and it works great. Though only for webkit powered browsers so can't vouch for others. But what problems are you expecting? The approach is simple and I can't think of how it might break.

Answer 3

I abandoned inlining templates through scripttags as my view layer would create redundant duplicate script templates. Instead I placed the templates back into the JavaScript as string:

var tpl = ''.concat(
    '<div class="person">',
        '<span class="name">${name}</span>',
        '<span class="lastname">${lastName}</span>',
    '</div>'
);

I used the string concat trick so I could make the template string readable. There are variations to the trick like an array join or simply additive concatenation. In any case, inline script templates works and works well, but in a php/jsp/asp view layer, chances are you will create redundant duplicate script templates unless you do even more work to avoid it.

Furthermore, these templates become rather complex the more logic you have to add to them, so I looked further and found mustache.js which imo. is far superior and keeps the logic (conditions and dynamic variable definitions) in the JavaScript scope.

Another option would be to retreive template strings through ajax, in which case you can put each template inside it's own file and simply grant it a .tpl extention. The only thing you have to worry about is the http request roundtrip, which should not take too long for small .tpl files and is imo. insignificant enough.

Answer 4

If you're using jQuery I can recommend jQuery templates instead:

http://github.com/nje/jquery-tmpl

I think it's supposed to be introduced officially in jQuery 1.5

BTW. I think both Resigs script and jQuery templates relies on using innerHTML, so as long as that works in your browser you should be OK.