I have two models basket and fruit. basket has fruits. The computed property on basket.fruits.@each.name doesn’t kick in with Ember 2.1.0.
Here are the gists:
//basket.js
import DS from 'ember-data';
import Ember from 'ember';
export default DS.Model.extend({
fruits: DS.hasMany('fruit')
});
//fruit.js
import DS from 'ember-data';
export default DS.Model.extend({
basket: DS.belongsTo('basket'),
name: DS.attr('string')
});
//controller/application.js
fruitList: Ember.computed('basket.fruits.length', 'basket.fruits.@each.name', {
get: function() {
return this.get('basket.fruits').map((fruit) =>
return fruit.get('name');
}).join(', ');
}
})
//routes/application.js
//adding fruit entries and updating the name in a timeout
afterModel: function (model) {
let fruits = model.get('fruits'),
fruitObj;
FRUITS.forEach((fruit) => {
fruitObj = this.store.createRecord('fruit', {
name: fruit
});
fruits.pushObject(fruitObj);
});
Ember.run.later(function() {
//setting the last object name
fruits.get('firstObject').set('name', 'grapefruit');
fruitObj.set('name', 'kiwi');
}, 300);
}
//application.hbs
"{{fruitList}}"
fruitList gets updated properly(on change of fruit.name) with Ember 2.0, but not with Ember 2.1.
The sample project is here: https://github.com/sridharpg/ember-computed-property-bug