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