CODEWITHSUNDEEP
javascriptember.js
whyAto8
whyAto8

Reputation: 1670

Ember - computed property (which is an array) not taking updated value upon adding items to array

Am working on ember app (1.11) and having an issue with computed property not taking updated value when its updated in code . Code as below (have trimmed down, only showing relevant snippet).

Am showing a list of things on UI when iterating through "data" which is a computed property. Then I make a selection from drop down, I am sending a action, triggering that computed property and adding things to that list. When I do this once, I get all the updated list or iteration on UI, but when I do the selection again to increase the list/iteration, the computed property is taking the initial value of list, not the updated one, where I just added one more item, hence not showing correct details.

I am not getting what's going wrong. I could not create a twiddle as well, as its a lot of code and got stuck in error in twiddle.

Parent Component- ehbs

{{pax-detail list=list}}

Parent Component - js

list: function(){
  return this.get('arr')   //This arr comes from route/controller via query string in url
}.property('arr')

Pax Detail Component- ehbs

{{pax-select action="changed"}}
{{ages ageData=data}}

Pax Detail Component - js

countChanged: '',
actions: {
 changed: function(e){
  this.set('countChanged',e.target.value)
 }
},
data : function(){
  var arr = this.get('list')
  // doing lot to manipulation - constructing arr/object


if(this.get('countChanged')){
  arr.pushObject({}) // basically modifying the initial arr
  return arr
} else {
  return arr
}

}.property('list','countChanged')

Pax Select Component - ehbs

<select>
 <option>0</option>
 <option>1</option>
 <option>2</option>
</select>

Pax Select Component - js

change: function (e) {
   this.sendAction('action',e)
 }

Upvotes: 0

Views: 298

Answers (2)

whyAto8
whyAto8

Reputation: 1670

What I tried, was that whatever I was doing inside "if" condition in computed property "data" , i moved that to action itself. And then I observed it started working. And not to mention, I had to use arr.[], as i understood that in case items of array are changing, i need to listen to all items. I am still not sure, why is that so but I thought would post this.

Upvotes: 0

Vasiliy vvscode Vanchuk
Vasiliy vvscode Vanchuk

Reputation: 7169

Your arr doesn't change if your example ( Changes it's content, but the array is the same )

Try next forms .property('arr.[]') or .property('arr.length')

or call .notifyPropertyChange('list') manually on modifying data. In fact your example is just list: Ember.computed.alias('arr')

Upvotes: 1

Related Questions