CodePen

HTML

            
              <h1>Test: Listen to changes on related model</h1>
            
          
!

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // classes
Event = Backbone.RelationalModel.extend({
  relations: [{
      type: Backbone.HasOne,
      key: 'location',
      relatedModel: 'Location'
    }]
});
Location = Backbone.RelationalModel.extend({});
EventView = Backbone.View.extend({
  initialize: function() {
    this.listenTo(this.model, "change", this.render);
    this.listenTo(this.model.get("location"), "change", this.render);
  },
  render: function() {
    this.$el.html("Event title = "+this.model.get("title")+"<br>Location = "+this.model.get("location").get("address"));
    return this;
  }
});

// objects
var myLocation = new Location({address: "My house"});
var myEvent = new Event({title: "Fun party", location: myLocation});
var myEventView = new EventView({model: myEvent});

// code
$("body").append(myEventView.render().el);
var anotherLocation = new Location({address: "A bar"});
// location change listener stops working after this
myEvent.set("location", anotherLocation);
anotherLocation.set("address", "A club");

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