At some point, all JavaScript developers encounter a situation that involves spitting out a large chunk of HTML to the page. I’ve seen a lot of ways to do JavaScript templating, from storing it in the JavaScript file itself to having it returned to you from an ajax request.

After reading various techniques on JavaScript templating, I decided to take John Resig’s idea of using script tags in your HTML. The reason I liked it was because you had your HTML in your HTML file. No funny stuff, just HTML where it belongs. I also liked the idea that it cached the templates – very good stuff. Here is what one of John’s examples looked like:

<script type="text/html" id="user_tmpl">
    <% for ( var i = 0; i < users.length; i++ ) { %>
        <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
    <% } %>
</script>

Right off the bat, what do you think? Does it feel weird? Does it feel like someone just pissed in your corn flakes? To be honest, I felt that way when I first saw it. This could be partly due to the fact that I have never used a script tag with a type text/html before. As John points out, the browser doesn’t know how to treat it, so these script tags with text/html are ignored, which makes it a perfect cloaking device for sneaking in templates.

I love that it’s HTML right in the HTML, but I didn’t like that it still had JavaScript wrapped around it (for loop). In my case, all I want is simple templating with some caching, I don’t want to perform JavaScript actions. I would much rather pull in the template and then perform the JavaScript actions within the JavaScript file itself.

Ok, I’ll get down to the geeky stuff. Here is what I came up with.

Check out the Gist

Usage

HTML

// The following HTML is in a script tag and will not render out on the page
<script type="text/html" id="user_tpl">
    <div>
        <a href="<%= url %>"><%= user %></a>
        <span><%= something_in_span %></span>
    </div>
</script>

JavaScript

// @param 1 - The id/selector of the <script> element holding the HTML template
// @param 2 - The data object containing the replacements
// If you have jQuery you need to pass a jQuery selector
// or else just pass it an id (without #)
var tpl = Template.draw('user_tpl', { user: 'bob', url: 'http://cornflakes.com' });
alert(tpl); // outputs 
/*
<div>
        <a href="'http://cornflakes.com">bob</a>
        <span><%= something_in_span %></span>
</div>
*/

Oops, we forgot to run a replacement for <%= something_in_span %> – no problem. We can re-template the same string, by calling the append method.

tpl = Template.append(tpl, { something_in_span: 'Hi im text inside a span' })
alert(tpl); // outputs
/* 
<div>
        <a href="'http://cornflakes.com">bob</a>
        <span>Hi im text inside a span</span>
</div>
*/

There are a lot of templating scripts out there and by no means is this the all-in-one solution. This is just my approach to making something that’s lightweight, easy to use and utilizes caching.