Is this an ideal way for javascript template management?

In order to manage my templates (in mustache.js) I wrote a lib to help. For instance,

<div id='beardTemplates'>
    <div data-beard='tpl1'>
        <h1>Hi, {{name}}</h1>
        <!-- a normal comment -->
        <!--@ Hi, {{name}}, this is an escaped template text. @-->
        <div data-beard='subTpl1'>sub tpl1</div>
    </div>
    <div data-beard='subTpl2' data-beard-path='tpl1'>
        sub tpl2
    </div>
</div>

// compiling the templates
Beard.load()

// after calling the load() method, the templates will be wrapped into an 
// object called Btpls, like :

Btpls =>
    tpl1 =>
        subTpl1
        subTpl2

// calling the template function
Btpls.tpl1({name: 'Liangliang'})

// output:
<h1>Hi, Liangliang</h1>
<!-- a normal comment -->
Hi, Liangliang, this is an escaped template text.

// calling the nested sub functions
Btpls.tpl1.subTpl1()

// output:
sub tpl1

The thing that I am not 开发者_如何学Csure is that is using <!-- --> to escape template text a safe way? say, I only test the lib under firefox, chrome and IE. They are all fine, but is there any other potential problem with other browser, say, Opera?

If you want the code to test on other browser, you can get it from https://github.com/jspopisno1/Beard

---

I have tested in IE 7.0, 8.0, Chrome, FireFox, Safari and Opera.

Only IE will cause some problem, because it will compress the html text that you try to append to innerHTML. It strips the leading comments away. It requires some more effort to make it work in IE, but asides this is all fine.

You can have a look here http://jspopisno1.github.com/Beard