CodePen

HTML

            
              
  <div id="main">
 
  </div> <!-- /main -->
  
 <!--Include Scripts from CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>

            
          
!

CSS

            
              h1, h2, li, p{
  font-family: source-sans-pro, sans-serif;
}

#main {
  width: 600px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              Backbone.Model.prototype._bubbleEventToCollection = function(caller, model, logMessage){
            this.listenTo(model, "remove", function(model, that, options) {
                console.log(logMessage, model);
                if (this.collection instanceof Backbone.Collection) {
                    this.collection.trigger("remove", model, that, options);
                }
                this.trigger("change", model, that, options);
            }, caller);
    };
    var PeopleModel = Backbone.Model.extend({
        defaults: {
            name: null
        },
        initialize: function() {
            this.on("remove", function(model) {
                console.log("person removed", model)
            }, this);
        }
    });
    var NeighbourHoodModel = Backbone.Model.extend({
        defaults: {
            name: null,
            people: null
        },
        initialize: function() {
            this._bubbleEventToCollection(this, this.attributes.people, "person removed from neighbourhood");
        }
    });
    var CityModel = Backbone.Model.extend({
        defaults: {
            neighbourhoods: null
        },
        initialize: function() {
              this._bubbleEventToCollection(this, this.attributes.neighbourhoods, "person removed from city");
        }
    });


    /**
     *
     * Collections
     */
    var NeighborhoodsCollection = Backbone.Collection.extend({
        model: NeighbourHoodModel,
        initialize: function() {
            this.on("remove", function(model) {
                console.log("person removed from neighbourhoods", model)
            }, this);
        }

    });
    var PeopleCollection = Backbone.Collection.extend({
        model: PeopleModel,
        initialize: function() {
            this.on("remove", function(model) {
                console.log("person removed from people", model)
            }, this);
        }

    });
    var CityCollection = Backbone.Collection.extend({
        model: CityModel,
        initialize: function() {
            this.on("remove", function(model) {
                console.log("person removed from cities", model)
            }, this);
        }
    })


    var cities = new CityCollection([{
        id: 1,
        neighbourhoods: new NeighborhoodsCollection([{
                id: 1,
                name: "neighbourhood-1",
                people: new PeopleCollection(
                    [{
                        id: 1,
                        name: "jim"
                    }, {
                        id: 2,
                        name: "fred"
                    }])
            }

        ]),
    }]);

    (function(cities) {
        cities.get(1).get("neighbourhoods").get(1).get("people").remove(1);
    })(cities);

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................