The jTemplates plugin for jQuery – Keep inline templates from being misinterpreted

I love the jTemplates plugin for jQuery.  It works great and I’ve had very little trouble working with it when I put my templates in separate files.  This ensures that the browser does re-interpret the html for the template and re-arrange the elements.  This happens mostly with tables in IE and Webkit browsers where you want to repeat the rows of the table.  You’ll see what I mean in a moment.

Take a template like the following:

<table>    
    <thead>
        <th>Date</th>
        <th>Title</th>
        <th>Count</th>
    </thead>
    <tbody>
        {#foreach $T as o}
            <tr>                                
                <td>{$T.o.CreatedOn}</td>
                <td>{$T.o.Title}</td>
                <td>{$T.o.Count}</td>
            </tr>
        {#/for}
    </tbody>    
</table>

This works great if I put the template in it’s own html or text file, but not if I embed it in a <div>. 

Why?  Well, the {# foreach} and the {#/for} lines in the template are NOT interpreted as being part of the <table> element, and so that text ends up being placed in the DOM as text elements either before or after the table.

The way around this is simple – just place your template in a <textarea> instead of a div.  Then you can use $(“#elementID”).val() to grab the literal text (which isn’t interpreted into the DOM as anything but text), and all should be good.

More later - joel