Question

I modified the list.html example here https://github.com/tbranyen/backbone.layoutmanager/blob/master/examples/list.html a bit:

http://jsfiddle.net/qhoc/nQJz6/

If you look into Firebug, you can see there is an extra div between ol and li.

I know I can get rid of it by moving li out the template and use tagName: 'li' in Items view. But that means I have to change my code in places. Also I prefer to keep the li in the template for design process consistency.

How to get rid of this div without modifying the template?

Answer 1

Override the partial function and do a jQuery#find like so:

Backbone.LayoutManager.configure({
    partial: function(root, name, el, append) {
        // If no selector is specified, assume the parent should be added to.
        var $root = name ? $(root).find(name) : $(root);

        // Use the append method if append argument is true.
        // Set the element to append to be the first child.
        this[append ? "append" : "html"]($root, $(el).children().first());
    }
});

This method can be overwritten on a global (above) or local instance.

You will also need to adjust afterRender to use the new element:

Backbone.LayoutView.extend({
    afterRender: function() {
        this.setElement(this.el.firstChild);
        this.delegateEvents();
    }
});

More information here: http://tbranyen.github.com/backbone.layoutmanager/#configuration/defaults