Geek Answers Handbook

The thrown Ember property is not updated

I'm not quite sure why my computed property does not return updated values.

I have a list of options that the user can click, and the action updates the property, which is an Ember object, for the controller. I have a computed property that goes through an object, searches for keys that have non-zero values ​​for this Ember Object property, and if it finds it, returns false, otherwise true.

Here is the material:

App.SimpleSearch = Ember.Object.extend({ init: function() { this._super(); this.selectedOptions = Ember.Object.create({ "Application" : null, "Installation" : null, "Certification" : null, "Recessed Mount" : null, "Width" : null, "Height" : null, "Heating" : null, "Power" : null }); }, selectedOptions: {}, numOfOptions: 0, allOptionsSelected: function() { var selectedOptions = this.get('selectedOptions'); for (var option in selectedOptions) { console.log(selectedOptions.hasOwnProperty(option)); console.log(selectedOptions[option] === null); if (selectedOptions.hasOwnProperty(option) && selectedOptions[option] === null) return false; } return true; }.property('selectedOptions') }); App.SimpleSearchRoute = Ember.Route.extend({ model: function() { return App.SimpleSearch.create({ 'SimpleSearchOptions': App.SimpleSearchOptions, 'numOfOptions': App.SimpleSearchOptions.length }); }, setupController: function(controller, model) { controller.set('model', model); } }); App.SimpleSearchController = Ember.ObjectController.extend({ getProductsResult: function() { var productsFromQuery; return productsFromQuery; }, setSelection: function (option, selectionValue) { this.get('selectedOptions').set(option, selectionValue); this.notifyPropertyChange('allOptionsSelected'); }, actions: { registerSelection: function(option) { console.log('registering selection'); console.log(this.get('allOptionsSelected')); console.log(this.get('selectedOptions')); this.setSelection(option.qname, option.value); },

The action in the registerSelection controller only works fine, but I only see console.log from the SimpleSearch model once. As soon as the property is evaluated for the first time, they do not pay attention to it, which means that the computed property does not track the changes of selectedOptions with each call:

 setSelection: function (option, selectionValue) { this.get('selectedOptions').set(option, selectionValue); this.notifyPropertyChange('allOptionsSelected'); },

Edit:

I really solved my problem without changing anything.

I changed the following line:

 this.notifyPropertyChange('allOptionsSelected');

in

 this.get('model').notifyPropertyChange('selectedOptions');

notifyPropertyChange must be called in the context of the model (or an Ember object that has observers for a particular property), and the string sent as an argument is the name of the updated property.

After I made this change, it worked as intended.

+6
source share
2 answers

Ember does not see objects for any changes to the object; he observes a single property.

How does this affect you? In this method, you are watching selectedOptions , but this object is still the same object, you can change its properties, but not the object itself. And then you tell Ember in the controller area that allOptionsSelected has changed, so it solves it, but it does not recount it, because it is not dirty, it just changed. You really want to say that selectedOptions has changed to get allOptionsSelected to recalculate its value. Unfortunately, you do this within the scope of the controller, so telling the controller that the property has changed does not matter for this.

 allOptionsSelected: function() { var selectedOptions = this.get('selectedOptions'); for (var option in selectedOptions) { console.log(selectedOptions.hasOwnProperty(option)); console.log(selectedOptions[option] === null); if (selectedOptions.hasOwnProperty(option) && selectedOptions[option] === null) return false; } return true; }.property('selectedOptions')

Here is an example of a dummy example showing which things make it actually update.

http://emberjs.jsbin.com/iCoRUqoB/1/edit

Honestly, since you are not looking at specific properties, I would probably create an array or create a method for an object that handles adding / removing / changing properties so that you can start the property change area from it, updating all the parent listeners with the changes.

+8
source

Ember dependent keys may be

  • property key. in the example: 'jobTitle'
  • computed property key. in the example: 'companyName'
  • object property key. in the example: 'salesAccount.name and salesAccount.website'

Example extracted from Ember.model definition:

 ... jobTitle : DS.attr('string'), salesAccount: belongsTo('salesAccount'), companyName: Ember.computed('jobTitle', 'salesAccount.name', { get: function () { return this.get('salesAccount.name'); } }), companyWebsite: Ember.computed('salesAccount.website', 'companyName', { get: function () { return this.get('salesAccount.website'); } }) ...
0
source

More articles:


All Articles