Handlebars template with “div” tag instead “script”

Question

Actually the question is in the subj... Is it possible to make handlebars template framework, to recognize templates within a div tag and not in script tag?

For example I would like to create template with this markup:

<style>
    div.text-x-handlebars {display:none;}
</style>
<div class="text-x-handlebars-template">
    <h2>I'm template</h2>
    <p>{{welcomeMessage}}</p>
</div>

Answer 1

Yes you can put your templates in <div>s rather than <script>s, for example:

http://jsfiddle.net/ambiguous/RucqP/

However, doing so is fraught with danger. If you put your template inside a <div> then the browser will interpret it as HTML before you've filled it in; so, if your template's HTML isn't valid until after it has been filled in, the browser may attempt to correct it and make a mess of things. Also, if you have id attributes in your templates, then you will end up with duplicate ids (one in the template <div> and a repeat in the filled in template that you put in the DOM) and that will cause all sorts of strange and interesting bugs. The browser will also try to download any images inside the templates in a <div>, this may or may not be a problem (if might even be desirable but probably not desirable if the image uses a template variable in its src attribute).

Basically, you can do it but you shouldn't, you should put your templates in <script id="..." type="text/x-handlebars-template"> elements instead.