A client-side JS framework with templates and caching?

Question

I use node.js on server side, express.js and jade. I have written a small wrapper function to fill jade templates on the client side. I think I'll use requireJS and jQuery on client side, but have not decided yet. Now, the task that I have to do many times is

• fetch a template (from server or cache)
• fetch data from server
• fill the template and insert it into/instead an element

Note: there are tons of template engines, and my question is not about a template engine, but about an easy workflow.

I have to do it this way:

var get_data = function (tpl) {
    $.get(url, function(data) {
        $('#target_element').html(jade.render(tpl, {locals: data}));
    });
};

if (!'template_name' in _cache) {
    $.get('template_name', function(tpl) {
        _cache['template_name'] = tpl;
        get_data(tpl);
    });
}
else {
    get_data(_cache['template_name']);
}

(in this example, the template and data are fetched synchronously, which is not nice)

I'd like to have a code like this:

render_template('template_name', 'url?arguments=values', {replace: '#element_id'});

(it's similar to MongoDB syntax)

Is there a simple framework or a jquery module to do this work?

Answer 1

I'm not sure if it fits your requirements completely, but PURE is a nice templating engine for you to consder:

http://beebole.com/pure/