javascriptpolymerpolymer-1.0

Dynamic databinding in Polymer


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?


Solution

  • 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>
    

    demo