使用参数化模板进行dom-repeat

Question

What is the clean way , with Polymer 2.0 , to parameterize the dom-repeat item template ?

Usage:

<custom-component>
    <template id="item-template">
        [[item]]
    </template>
</custom-component>

CustomComponent:

<dom-module id="custom-component">
    <template>
        <template is="dom-repeat" items="[[foo]]" id="repeater">
            <!-- Parameterized template -->
        </template>
    </template>
    <!-- scripts... -->
</dom-module>

I cannot find any clear documentation on Polymer 2.0 to achieve this.

Answer 1

I just new to learn polymer.Maybe I just your question.I guess you want to repeat an element which has the structure and data depends on want you need it to be. And there are 3 points.

demo-element.html

<dom-moudle is="demo-element">
  <template>
    <span>{{property1.name}}</span>
    <span>{{property1.age}}</span>
    <script>
      class DemoElement extends Polymer.Element {
        static get is() { return 'demo-element'; }
        static get properties() {
          return {
            property1: Object
          }
        }
      }
      window.customElements.define(DemoElement.is, DemoElement);
    </script>
  </template>
</dom-moudle>

custom-component.html

<dom-module id="custom-component">
  <template>
    <template is="dom-repeat" items="[[foo]]" id="repeater">
        <demo-element property1="[[item]]"></demo-element>
    </template>
  </template>
</dom-module>

1. Dom-repeat's item property will be set on each instance's binding scope ,so you can not set dom-repeat's item property in custom-component's instance.

2. Create a custom element with the structure and data as you need.Repeat the custom element with dom-repeat .

3. slot element is always suitable for Polymer.If you need to let custom-component include some other elements you should use placeholder.