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.

1 Like
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.

1 Like
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!