带参数化模板的dom-重复

Question

什么是洁净方式，与聚合物2.0，参数化的多姆重复项目模板？

用法：

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

为了实现这一点，我找不到任何关于Polymer2.0的明确文档。

Answer 1

我刚开始学习polymer.Maybe，我只是问你一个问题，我想你想重复一个元素，它的结构和数据取决于你想要的是什么。有3分。

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-重复的item属性将在每个实例的绑定范围上设置。，因此不能在custom-component's实例中设置dom-重复的item属性。
2. 在使用need.Repeat创建自定义元素时，使用结构和数据创建自定义元素。
3. 插槽元素总是适合于Polymer.If，您需要让custom-component包含一些其他元素，您应该使用占位符。