Template repeat index value is evaluated only after loop end

[yogevyuval]

I'm creating a list of items like this:

<template repeat="{{item in items}}">  
    <prog-bar
      name="{{item.name}}" >    
    </prog-bar>
</template

Now I want each prog-bar element to get also it's index in the list of items, So I add something like this:

<template repeat="{{item,i in items}}">  
    <prog-bar
      index="{{i}}"
      name="{{item.name}}" >    
    </prog-bar>
</template

Unfortunately, this does not work. When the attachedCallback function is called the value of this.index is undefined. By putting a breakpoint in attachedCallback() I see that the elements are created one after the other but the value of index is undefined, when all of the items are loaded then suddenly the index appear.

This led me to this solution:

<template repeat="{{item in items}}">  
    <prog-bar
      index="{{getIndex(item, items}}"
      name="{{item.name}}" >    
    </prog-bar>
</template

...

function getIndex(item, items) {
    return items.indexOf(item)
}

Am I missing something or is there a problem with evaluating the repeat index?

[ebidel]

If you wait until domReady, index will be defined if you want to poke at them in JS. This waits an additional frame after attached. By that time, the binding system will have populated the value.

Try http://jsbin.com/metazabuzoji/1/edit