CODEWITHSUNDEEP
ember.js
Sarus
Sarus

Reputation: 3313

Ember.js 1.0.0: Computed Property in Parent Controller Based on Child ItemController Property Not Updating

I have an AlertsController which has multiple AlertController children underneath it. When a user clicks on an alert I set an isSelected flag to true in the AlertController from the AlertView. I then have a computed property in AlertsController that should return the number of selected alerts.

The AlertsController and AlertController look like this:

App.AlertsController = Ember.ArrayController.extend({
    itemController: 'Alert',
    //numSelected doesn't update when isSelected flag in an alert changes
    numSelected: function(){
        return this.filterProperty('isSelected', true).get('length');
    }.property('@each.isSelected')       
});

App.AlertController = Ember.ObjectController.extend({
    isSelected : false,
});

I know the isSelected property in the AlertController is updating but the value for numSelected in the AlertsController is only computed once when the page loads.

I recreated my issue in the following fiddle:

JSFiddle: http://jsfiddle.net/WLAnF/8/

Does anyone know what I could be doing wrong here? Thank you for your assistance!

Upvotes: 2

Views: 477

Answers (1)

Panagiotis Panagi
Panagiotis Panagi

Reputation: 10087

You should not define isSelected in App.AlertController: 

App.AlertController = Ember.ObjectController.extend({
  // isSelected : false,
});

See working demo: http://jsfiddle.net/BQmww/1/

The reason is that, if you define isSelected explicitly in App.AlertController, it will not be available in the proxied content object (and therefore it will not be accessible by App.AlertsController).

Upvotes: 1

Related Questions