In the evaluate function:

// check if template already loaded before
if(Jst.templates[src] != true)
{
// load the template synchronous
$.ajaxSetup({async:false});
$.get(Jst.templateRoot + src +’.jst.html’, function(data)
{
// create the textarea container and add the loaded template
$(”body”).append(”+ data +”);

// update the templates status array
Jst.templates[src] = true;
});

// set the global ajax setup back to asynchronous
$.ajaxSetup({async:true});
}

// parse the data with the template
var script = Jst.parse($(”#jst_”+ src).text());
eval(script);

Extra helper var’s:

// the folder where the templates are located
templateRoot:”",

// status array keeping track if templates were loaded before
templates:{}

This is definately very important for AJAX development, as AJAX usually transfer data from server, we need a template engine to render the data for presentation to avoid mix the template logic inside the javascript code. JSP template provides a very clean seperation, at the same time, it still proivdes full power of a programming language.

I found it’s much simpler to implement this kind of engine compare to using java language as javascript is a dynamic language which provides a handy “eval()” method.