CodePen

HTML

            
              <h1>Related Test: Listen to changes on related model, using manual trigger</h1>
            
          
!

↑ Insert the most common viewport meta tag

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);
  },
  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);
myLocation.set("address", "The bar");
// this does not work - maybe because hasChanged() returns false?
myEvent.trigger("change");
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................