Computed property (an array) not taking updated value when an item is added

1

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.

Its really driving me crazy, as I am not getting whats going wrong. I could not create a twiddle as well, as its a lot of code and got stuck in error in twiddle. Really need to solve this asap as have to meet the deadlines.

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)
 }
2

You need the CP to depend on the the length of the array by adding ‘.’ otherwise the CP will only update when you set the entire array at once (not when you push new data into it)

list: function(){ return this.get('arr'); }.property('arr.[]')

That said, if all you are doing is passing through the array unchanged then you might as well just pass it directly to the component:

{{pax-detail list=arr}}

3

So, do i need to add “.” to CP list in parent component js OR CP data in pax detail component. Shouldnt it be data, as list is just providing crude data and the main heavy lifting is done in data.

4

I’d probably add it to both just to be safe but the CP in the parent component is unnecessary anyway, if you are set on using list then just use an alias instead as there really is no point having a CP that just returns the exact value you pass it

list: Ember.computed.alias('arr')

your changed action is really odd as well, why not just push value into list straight away? You’d be able to do away with countChanged that way and remove the CP dependency for data

this.get('list').pushObject(e.target.value)

data: function(){ ... }.property('list.[]')

5

Well, actually the property “data” is more useful for me, as inside that I am fetching “list” (list is just a string of comma separated values) and using list here, I am creating array of objects based on some calculations and hence passing that “data” down to “ages” component.

About action, it is because it sets the “countChanged” and when “data” is fired, it will check for certain conditions in “e” and based on some checks, the code will go ahead. I actually just trimmed down my actual code to show it like here.

6

I tried adding . to both CP in parent and pax-detail component, but doesnt seem to work. Any ideas, what could be wrong.

7

okay, one more thing to check. As i said, the list has the value - ‘5,6,21,14,29,67’ essentially a string with csv. But when I fetch this value in data, I make some check in code and am creating an array of objects such as [{ age:5, counter: 1, code: ‘c’, etc }] The age property is what i take from list and based on it, i assign counter and code. Finally, i am returning an array of objects. So, does it make any difference as to if the source was a string of csv and the return value is array of objects? could this be a problem.

8

Hey,

With some help and guidance from your answer, I was able to fix it. All the manipulation which I am doing in CP “data”, I moved that to action and instead of triggering CP “data” via “countChanged”, I did all the stuff in action only and pushed list and it worked. I dont know whats the reason, what i was doing wrong, but am glad, got hint from your answers and did that.

Thanks a lot. :slight_smile:

9

Glad to help out, have fun!