使用參數化模板進行dom-repeat

Question

使用Polymer 2.0 ，參數化dom-repeat項目模板的干凈方法是什么？

用法：

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

我找不到有關Polymer 2.0的任何明確文檔來實現這一目標。

Answer 1

我只是新學習聚合物。也許我只是你的問題。我想你想重復一個具有結構和數據的元素取決於你是否需要它。 並且有3分。

演示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>

定制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的item屬性將在每個實例的綁定范圍上設置 ，因此您無法在custom-component's實例中設置dom-repeat的item屬性。

2. 根據需要使用結構和數據創建自定義元素。使用dom-repeat自定義元素。

3. slot元素總是適合Polymer.If你需要讓custom-component包含一些其他元素，你應該使用占位符。