Increment computed property and bind to element in each iteartion


#1
My goal is want to give id for select element which is iteratively inside of 
{{each}} helper. 

For example, first select should have id UDF_CHAR_1, second have UDF_CHAR_2, 
and goes on. 

I am binding computed attribute to id property of select. 
In the computed attribute i am increasing counter. The problem is instead of 
assigning id iteratively, it assigns UDF_CHAR1 to all. 

My guess is the computed attribute gets calculated once. It is not invoked each 
time inside of {{each}} helper.

Check it here : http://jsbin.com/OvUNaCOK/2/edit

Any solution to achieve this? 

#2

I think if you bind attribute to item.idTest instead you would get the correct id in your JSBin.


#3

Yes i can. But its not my requirement. I want to bind id that should be incremented iteratively inside of loop i.e. {{each}}


#4
 I figured out the problem. As i guessed computed property will be invoked once and cached. Any other solution to achieve my goal. 

#5

You can try adding a call to volatile() on your getId computed property.


#6

What is the end result you are trying to achieve?

I think it’s worth to take a step back and try to approach the problem from another angle. Probably the built-in Ember.Select view will solve your problem.

Ember.js works with the DOM at a higher level of abstraction and most of the time you don’t need to set ids manually.


#7

This is what i want. Thanks :slight_smile:


#8

@balint: I used that but end up with confusion how to do some operations. For example, if i click one button say ‘Deselect’ then the selected items in the select should be deselected. I am sure Ember.Select view is more useful but i am struggling since i am new to Ember. Thanks for the reply!