I'm trying to bind a property of a polymer component inside a dom-repeat block. In the following (pseudo-code) example, I try to bind a property of elem-a to a property of elem-b:
<template is="dom-repeat" items="[[data]]">
<elem-a></elem-a>
<elem-b prop-of-b={{prop-of-a}}></elem-b>
</template>
But in this context {{prop-of-a}}
is considered as the property of the dom-repeats host element.
Is it possible to bind properties like in the example above within a dom-repeat?
Yes, this is possible.
You would have to bind the <elem-a>.propOfA
to an intermediate property in the host element, and bind that property to <elem-b>.propOfB
:
<elem-a prop-of-a="{{a}}"></elem-a>
<elem-b prop-of-b="[[a]]"></elem-b>
Within a dom-repeat
, you would have to bind each iteration of <elem-a>.propOfA
to a unique intermediate property in the host by binding to the iterator instance (which is named item
by default):
<template is="dom-repeat" items="[[data]]">
<elem-a prop-of-a="{{item.a}}"></elem-a>
<elem-b prop-of-b="[[item.a]]"></elem-b>
</template>