Question

Take a HTML tabbar as example. Usually you have a ul and a list of div’s. All the Backbone examples that I have found, link the View with only one node by the ‘el’, ‘tagName’, etc…

HTML TabBar:

<div class=".tabbar">
    <ul class=".tabbar-header">
        <li><a href="#tab-cars">Cars</a></li>
        <li><a href="#tab-houses">Houses</a></li>
    </ul>

    <div id="tab-cars" class=".tabbar-item">...</div>
    <div id="tab-houses" class=".tabbar-item">...</div>
</div>

Backbone Code:

window.TabBarView = Backbone.View.extend({

    el: ???,

    tabs: [],   

    render:function (eventName) {

        // Render all tabs in this.tabs

        _.each(this.tabs, function (item, position) {
            // Render each tab with item.render()
        }, this);

        return this;
    }
});

window.TabBarItemView = Backbone.View.extend({

    el: ???,

    initialize:function () {
        this.model.bind("change", this.render, this);
        this.model.bind("destroy", this.close, this);
    },

    render:function (eventName) {

        // Render the tab header and tab content

        return this;
    }

});

I wish to add several TabBarItemView’s to the TabBarView and each one creates itself the li node inside the ul.tabbar-header and the div.tabbar-item as content.

Answer 1

I’ve written an article that addresses this issue: http://lostechies.com/derickbailey/2011/10/11/backbone-js-getting-the-model-for-a-clicked-element/

It will show you how you can either use a single view to do what you want, or a parent/child setup with a collection view and item view like you’re showing in your sample code