April 15, 2008

jQuery template engine

Filed under: AJAX, HTML, Javascript, template — Tags: , , , , — Zeal_ @ 7:58 pm

As per popular demand (well, one person asked for it), this is the jQuery version of the template engine described in my earlier post, titled MooTools template engine (a new approach). To see what it does and for some usage examples I recommend reading that post first.

Here, instead of uploading the .js file as an attachment, I publish it section-by-section, providing comments along the way.

This is the $type function taken straight from Mootools 1.11, customized somewhat so it meets my needs better.

function $type(obj){
        if (obj == undefined) return false;
        if (obj.htmlElement) return 'element';
        var type = typeof obj;
        if (type == 'object' && obj.nodeName){
                        case 1: return 'element';
                        case 3: return (/\S/).test(obj.nodeValue) ? 'textnode' : 'whitespace';
        if (type == 'object' || type == 'function'){
                        case Array: return 'array';
                        case RegExp: return 'regexp';
                if (typeof obj.length == 'number'){
                        if (obj.item) return 'collection';
                        if (obj.callee) return 'arguments';
        return type;

The next function, fillTemplate, is used internally by both public methods for doing the actual templating work. The argument target represents a template to be fileld, and data is the data to fill the template with.

function fillTemplate(target, data) {
    var target = $(target);
    for(var key in data) {
        var tmpEls = target.find('.' + key);
        var obj = data[key];
        switch($type(obj)) {
        case 'array':
            // clone array of 'el'
            for(var i=0;i<obj.length;i++) {
                var tmpEl = $(tmpEls&#91;i%tmpEls.length&#93;);
                var a = tmpEl.clone(true);
                if (($type(obj&#91;i&#93;) == 'array') || ($type(obj&#91;i&#93;) == 'object')) {
                    fillTemplate(a, obj&#91;i&#93;);
                } else {
        case 'object':
            // object, descend
            fillTemplate(tmpEls&#91;0&#93;, obj);
            // set text of el to obj

And now for the public functions. On the details of their usage, refer to the relevant parts of the original post linked above.

Our first public function, <strong>expandTemplate</strong> copies a template DOM node to the <strong>target,</strong> and fills it with <strong>data.</strong>

function expandTemplate(template, target, data) {
    var template = $(template);
    var target = $(target);
    fillTemplate(target, data);

The function tmpl is the AJAX front-end for fillTemplate. It gets JSON data from the given url posting any optional data (postData) and fills the template with the response. This slightly differs from the approach of the mootools version.

function tmpl(template, target, url, postData) {
    var template = $(template);
    var target = $(target);
    $.getJSON(url, function(data) {
        expandTemplate(template, target, data);
    }, postData);


Using jQuery, the code got slightly simpler and a tad bit faster. Have fun using it :)

(As a side note, a PHP version is still on the way, it has some performance issues.)


  1. cool thanks fot this article

    Comment by — April 15, 2008 @ 9:16 pm

  2. Cool stuff. Here’s a little addition that lets you call it like this –

    $(‘target’).render($(‘template’), data);

    jQuery.fn.render = function(template, data){
    template = template == null ? this : template;
    expandTemplate(this, template, data);

    Comment by lightpoint — November 30, 2008 @ 4:55 pm

  3. Indeed nice!
    If you extend it in the way that lightpoint mentioned add

    return this;

    to the end of the function so that the fluent interface will not be broken.

    Comment by Harry — December 20, 2008 @ 10:59 pm

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at

%d bloggers like this: