Binding to property of model attribute in Backbone.js

Question

Disclaimer: I'm new to Backbone.js (coming from AngularJS), so I may have an inaccurate mental model of how this is supposed to work.

I have an object, characterNodes, which I'm making an attribute on my model. characterNodes looks something like this:

 var characterNodes = {
  character_1: {
      stories: [// list of Stories]
  },
  character_2: {
      stories: [// list of Stories]
  }
  ...
}

My Backbone Model looks something like this:

var StoryGraph = joint.dia.Graph.extend({

    initialize: function() {
        // Call parent constructor
        StoryGraph.__super__.initialize.apply(this, []);

        this.set('characterNodes', characterNodes);

        this.on('change:characterNodes', function() { 
            alert('test');
        });
    }
  });

Each Story has a property "isUnlocked" which is changed elsewhere in the application. I want to fire an event (ie. that is, the alert 'test' should pop up) whenever this property is changed. With the code as it is above, the event never seems to fire.

I can't get a clear understanding from the Backbone docs whether this is supposed to work - does on('change:characterNodes') fire whenever any property (or sub-property, or sub-sub-property, etc) of characterNodes changes? Or only when the pointer to the object changes, that is, when it's replaced with another object? Or am I doing something else wrong? Thanks!

Answer 1

Backbone doesn't do any magic, basically, the change event is fired only if you set the "characterNodes" to a new object. If you're changing a nested property of that object, Backbone doesn't know it happened. You have three options: a) Change the whole object (e.g. by creating a copy), b) fire the change event manually (m.trigger("change:characterNodes")) whenever you change a nested property, c) Do not use nested objects for this. Have "character1_Stories" as a top level property.

Options c) is preferable. Try to keep properties in your models flat. Option a) is also fine but it has the disadvantage of having to copy the object. Option b) is not recommended. This is because Backbone keeps track of the previous value of the model properties (m.previous("characterNodes")). If you change a nested property, the previous value will have the same reference to the same object as the new value, therefore, it won't reflect its previous state.