How are change events handled in trunk models?

Question

I am trying to create a model that dynamically updates session variables in a Meteor project. I know that plain JSON should not be stored in the base models, so I have a special model configured like this:

initialize : function () { // Log the changed properties this.on('change', function (model, options) { for ( var i in options.changes) this.display(i); Session.set('NewSpecial', model); }); }, //Attributes defaults: { "Product" : null, "ShortDescription" : null, "Category" : "food", "Price" : new PriceModel, "Date" : new DateModel, "Uses" : 0, "Tags" : [], "Contributor" : null }, 

With "Price" and "Date" are stored in their own models:

 //Price model for use within Special var PriceModel = Backbone.Model.extend({ defaults : { "Regular" : null, "Special" : null, "PercentOff" : null } }); //Date model for use within Special var DateModel = Backbone.Model.extend({ defaults : { "StartTime" : null, "EndTime" : null, "HumanTimeRange" : null } }); 

As shown, when the attributes of a special model change, it must invoke the mapping for the changed attribute, and then set Session var to the model. However, if the DateModel or PriceModel parameters are changed, it does not fire the change event on a special model. Should each "DateModel" and "PriceModel" have their own this.on('change', ...) methods that call the Special.set(attribute, thisModel) ? Or is there another way to do this?

Answer 1

I see a couple of problems.

First of all, your defaults :

 defaults: { "Product" : null, "ShortDescription" : null, "Category" : "food", "Price" : new PriceModel, "Date" : new DateModel, "Uses" : 0, "Tags" : [], "Contributor" : null } 

This will cause one PriceModel , one DateModel and one tag array to be shared by all instances of this model. The defaults object is shallowly copied and merged into model attributes, none of the values ​​in defaults are cloned or duplicated, they are simply copied as is. If you want to highlight the values Price , Date and Tags , then use the function for defaults :

 defaults: function() { return { "Product" : null, "ShortDescription" : null, "Category" : "food", "Price" : new PriceModel, "Date" : new DateModel, "Uses" : 0, "Tags" : [], "Contributor" : null }; } 

The second problem is that set has a fairly simplified view of what change means. If you look at the source for set , you will see the following:

 // If the new and previous value differ, record the change. If not, // then remove changes for this attribute. if (!_.isEqual(prev[attr], val) || (_.has(now, attr) !== _.has(prev, attr))) { this.changed[attr] = val; if (!silent) this._pending[attr] = true; } else { delete this.changed[attr]; delete this._pending[attr]; if (!changing) delete this._changes[attr]; } 

_.isEqual will not recognize that something has changed inside your Price or Date or that you have added or removed something from Tags . If you follow these steps:

 p = new PriceModel(...); m.set('Price', p) 

then m will notice that Price has changed, but if you:

 p = m.get('Price'); p.set(...); m.set('Price', p); 

then m will not recognize that Price has changed; your model will not automatically bind to events on Price , so that it does not notice the call to p.set(...) , and it does not recognize m.set('Price', p) as a change, since this is a little more than a fancy way say p = p .

You can solve part of this change problem by not providing the array a set a Tags that came from get ; make a copy, change the copy, and then pass the updated copy to set . Half can be processed by binding to the "change" events on the Price and Date models and redirecting them in the same way as collections do, for example:

 initialize: function() { this.attributes.Price.on( 'all', function(ev, model, opts) { this.trigger(ev, model, opts) }, this ); //... } 

You want to provide your own implementation of set in case someone does set('Price', some_new_object) , and you need to set('Price', some_new_object) your forwarder.