[SOLVED] Compute attribute value based on index within dom-repeat

Compute attribute value based on index within dom-repeat

I'm just getting started with Polymer and faced with the following issue.
I'm trying to pass a boolean value to pill component as an attribute.
Value of this attribute depends on dom-repeat's index.
How to do that in Polymer ?

This code is not working:

 <template is="dom-repeat" items="[[values]]">
   <pill
     disable="[[index === 0]]"
     part="pill">
     [[item]]
   </pill>
 </template>

Solution

Polymer only allows for simple property bindings within attributes. Anything more complex than that needs to use a computed binding which passes arguments to a functions. In your case it could be something along the lines of disable="checkIndex(index)" a function which would then check if the index is 0.

Another solution if you are only checking for 0, would be to use the falsy property of javascript: disable="{{!index}}" which would also disable the pill.