Question

I am trying to accomplish a module where i need to use nested templates and I am stuck at HOW can i do that.

basically there are 3 levels in my UI, for example say Level 1, Level 2, Level 3.
So when the page is displayed i need to render level 1 only.
But when user clicks on “expand” button of any element of level1 i need to render corresponding elements of Level 2 (not all) below the selected element of level 1.

Now when user clicks on “expand” of any element of Level 2, corresponding Level 3 should be rendered..

To summarize it should be just like Windows Explorer’s navigation bar on left.!

Answer 1

Generally, you should define separate components for each level, assign template to each of your components and implement something like expand()/collapse() methods. If a component is initially collapsed (your case) then it shouldn’t need to render child items on initialization, it would render them only when you expand them (the appropriate templates of child components would be used).

Please provide a basic code that you are trying to make work, it would be easier to help you that way.

Here is a quick prototype of Widget system with a simple rendering flow that uses templates. I guess you want something like that in your application. It is unoptimized, it’s just an idea of how your framework might look.

/**
 * Widget constructor
 */
var Widget = function(config) {
    // apply config
    $.extend(this, config);
    // attempt to render
    this.render();
};

/**
 * Widget prototype
 */
$.extend(Widget.prototype, {
    // render target
    renderTo: null,
    // template
    tpl: '<div class="container-panel">' +
            '<p>${txt}</p>' +
            '<div class="items-container"></div>' +
        '</div>',
    // template data
    tplData: null,
    // child items array
    children: null,
    // initial collapsed state
    collapsed: false,
    // widget's root element
    el: null,
    // default render target selector for child items
    renderTarget: '.items-container',

    render: function() {
        var me = this,
            renderDom

        // render the widget
        if(!this.rendered && this.renderTo && this.tpl) {
            renderDom = $.tmpl(this.tpl, this.tplData);
            // assume that first element is widget's root element
            this.el = renderDom[0];
            $(this.renderTo).append(renderDom);

             // clear the reference
            renderDom = undefined;

            // THIS IS JUST EXAMPLE CODE! Bind click handler...
            $(this.el).find('p').first().click(function() {
                me.collapsed ? me.expand() : me.collapse();
            });    

            // find render target for children
            this.renderTarget = $(this.el).find(this.renderTarget).first();

            // render children if not collapsed
            this.renderChildren();

            // set rendered flag
            this.rendered = true;
        }
    },

    renderChildren: function() {
        var children = this.children;
        if(!this.collapsed && children && children.length) {
            for(var i = 0, len = children.length; i < len; i++) {
                // render children inside 
                children[i].renderTo = this.renderTarget;
                children[i].render();
            }
        }
    },

    /**
     * Expand template method. Override it.
     */   
    expand: function() {
        this.collapsed = false;
        this.renderChildren();
        this.renderTarget.show();
    },

    /**
     * Collapse template method. Override it.
     */    
    collapse: function() {
        this.collapsed = true;
        this.renderTarget.hide();
    }
});

​Here I pre-defined the templates and hardcoded the expanding/collapsing logic that happens on click inside widget’s first paragraph element.

This is how you would use the widgets:

// Using our widgets
var containerPanel = new Widget({
    tplData: {txt: 'Hello world!'},
    renderTo: $('body'),
    collapsed: true,
    children: [
        new Widget({
            tplData: {txt: '  Child 1'},
            collapsed: true,
            children: [
                new Widget({
                    tplData: {txt: '    Child 1.1'}
                }),
                new Widget({
                    tplData: {txt: '    Child 1.2'}
                }),
                new Widget({
                    tplData: {txt: '    Child 1.3'}
                })
            ]
        }),
        new Widget({
            tplData: {txt: '  Child 2'}
        })
    ]
});

You can see a live example on jsFiddle: http://jsfiddle.net/dipish/XDmWq/
Just click on items and look at the dynamically generated markup.

I think the code is self-explanatory but feel free to ask any questions. Note that the code uses jQuery Templates Plugin but it is just for convenience.

If you have many complex components in your web app you may want to use something more serious than bare jQuery, like ExtJS or Dojo Toolkit. Such frameworks typically provide you a convenient class system and base widget/component logic to build on, besides lots of other things.

Good luck!