PureJSTemplate – A pure javascript templating engine for jQuery

Most templating languages suck

Ok, if your like me then you hate all templating langauges- they suck, they really suck. I hate them because I hate the rules they enforce upon me, they are slow, and they slow me down. Because of this, usually I end up making code that looks like this:

UGLY:

1
2
3
4

function display(data) {
   var output = "<div>" + data.text + "</div>";
   element.innerHTML=output;
}

How horrible is that? That’s probably worse than using a bad templating langauge.

Well, after disappointments with other jQuery templating plugins, I decided to make my own:

The Solution: PureJSTemplate

With PureJSTemplate you use old fashioned javascript in your template. You simply surround the javascript in special tags. Here’s an example of what you can do:

1
2
3

<# for(var i=0; i<10; i++) { #>
   <#=i#><br/>
<#}#>

That will output the numbers 0 through 9. Easy, isn’t it?

Using it:

You simply surround your template code with a textarea tag:

1
2
3
4
5

<textarea id="tpl" style="display:none">
 
<!-- TEMPLATE CODE HERE -->
 
</textarea>

and call it from javascript like so:

1
2
3
4

$("output").pureJSTemplate({
   id   : "tpl",
   data : {}
});

That’s it.

Get the Code:

Visit a demo/benchmark page here. Get the js here.