A Backbone.js base fiddle

by phoenecke

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>

JavaScript

var Subtab = Backbone.Model.extend({
    defaults: { label: undefined }
});

// Subtabs Collection
var Subtabs = Backbone.Collection.extend({
    model: Subtab
});

// Tab Model
var Tab = Backbone.Model.extend({
    defaults: { label: undefined, subtabs: new Subtabs},
    initialize: function(){
        // listen for change in subtabs collection.
        this.get('subtabs').on('change', this.subtabsChanged, this);
    },
    subtabsChanged: function(model) {
        // trigger new event.
        this.trigger('subtab:change', this, model);
    }
});

// Tabs Collection
var Tabs = Backbone.Collection.extend({
    model: Tab
});

var subs = new Subtabs();
var sub1 = new Subtab({label: 'subtab1'});
var sub2 = new Subtab({label: 'subtab2'});
subs.add(sub1);
subs.add(sub2);

var tabs = new Tabs();
var tab = new Tab({label: 'tab1', subtabs: subs});
tabs.add(tab);

$('body').append('<div>original subtab label: ' + sub1.get('label') + '</div>');

tabs.on('subtab:change', function(tab, subtab) { 
    $('body').append('<div>changed subtab label: ' + subtab.get('label') + '</div>');
});

sub1.set({label: 'testchange'});