javascript - 带参数化模板的 dom-repeat

Question

使用 Polymer 2.0 参数化 dom-repeat 项目模板的简洁方法是什么？

用法:

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

自定义组件:

<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 个点。

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 , 所以你不能在 custom-component 的 实例中设置 dom-repeat 的 item 属性。

2. 根据需要使用结构和数据创建自定义元素。使用 dom-repeat 重复自定义元素。

3. slot元素总是适用于 Polymer。如果您需要让 custom-component 包含一些其他元素，您应该使用占位符。