Bind sub-model to view in backbone / marionette

Question

I have a User model that has a BankAccount model and I have view who's model attribute is set to the User model and in that view's template I reference an attribute of the bank account:

<%= bankAccount.get('description') || 'No linked account' %>

If I updated the bankAccount the view doesn't pick up on the change:

user.get('bankAccount').set('description', 'foobar')

I tried adding the following in the initialize on the User model but it didn't work either.

initialize: function() {
  var self = this;

  this.on('change:bankAccount', function() {
    self.get('bankAccount').bind('change', function() {
      self.trigger('change');
    });
  });
}

Any suggestions? Also, both these models use backbone relational, if that helps.

score 3 · Accepted Answer · answered Aug 08 '12 at 21:07

Have your view subscribe to the description change event on the BankAccount model and re-render itself

UserView = Backbone.View.extend({
  initialize: function() {
    this.model.get('bankAccount').on('change:description', this.render, this);
  }
});

score 1 · Answer 2 · answered Aug 09 '12 at 00:28

From the Backbone-relational Events you will see that you can bind to update:<key> and further below there is an example (which I copy/pasted below) on how to listen to changes/updates on HasMany and HasOne relations

// Use the 'update' event to listen for changes on a HasOne relation 
// (like 'Person.livesIn').
paul.bind( 'update:livesIn', function( model, attr ) {
    console.debug( 'update to %o', attr );
});

Bind sub-model to view in backbone / marionette

2 Answers2