I have incorporated the Backbone nested plugin into my project. The way I set up my binding is as follows :
var view = Backbone.View.extend({
initialize: function(params) {
this.model.bind('change', _.bind(this.rerender, this));
}
The model I assigned to the view is defined in global scope outside the view like this :
newModel = new Backbone.NestedModel(jsonData);
When I use newModel.set("prop", "value"), it triggers a change event and prompts a rerender.
However, if I use newModel.set("prop.prop", "value") and the inner property already exists, it does not trigger the "change" event. This means that a value change is not detected.
Interestingly, a new value is detected: newModel.set("newProp.newProp", "value") triggers a change.
The nested gets DO WORK.
When I retrieve a value using newModel.get("prop.prop"), it returns the desired value.
Furthermore, if I specifically listen to a certain property, it works as expected :
this.model.bind('change:prop.prop', _.bind(this.rerender, this));
} //fires rerender
According to the documentation of the plugin, listening to "change" should trigger a change in any scenario :
// this will fire when 'name.middle.initial' is set or changed
user.bind('change', function(model, newVal){ ... });
However, in my case, it does not work as expected. What could I have possibly done wrong?