在 dom-repeat 中嵌套元素和动态内容 - Polymer 1.0

Question

我有一个 <parent> 元素，其中有一个带有任意数量制表符的 <tabs> 元素（纯粹用于 UI 中的 hiding/showing 逻辑），以及一个<child> 每个 <tab> 内的元素。现在我有以下工作：

<!-- inside parent.html: -->
<tabs></tabs>

<!-- inside tabs.html: -->
<template is="dom-repeat" items="{{tabs}}" as="tab" index-as="item_no">
    <section>
        <child id="element-{{tab.index}}"></child>
    </section>
</template>

只有 <parent> 知道需要多少个 <child> 实例（<tabs> 只是从 <parent> 接收一个数组并对其进行迭代。

有没有办法在 <tabs> 的本地 DOM 中不硬编码 <child>？考虑使用 <content> 和 light DOM 但不知道从哪里开始。这是一条有前途的路线吗？

期望状态：

<!-- inside parent.html: -->
<tabs>
    // somehow specify base content to be rendered in each tab
</tabs>

<!-- inside tabs.html: -->
<template is="dom-repeat" items="{{tabs}}" as="tab" index-as="item_no">
    <section>
        // somehow inject stuff from parent element, perhaps via <content>?
    </section>
</template>

Answer 1

这是我对你的问题的解释，所以我不确定你是否接受。如果我误解了你，请发表评论，我很乐意更新我的答案。

我想出了一个简单的元素组合，不需要 dom-repeat 或手动模板冲压。该解决方案由两个自定义元素组成，即 my-parent 和 my-child.

两个自定义元素的定义如下：

<dom-module id="my-parent">
  <template>
    <tabs>
      <content></content>
    </tabs>
  </template>
  <script>
    Polymer({
      is: 'my-parent',
    });
  </script>
</dom-module>

<dom-module id="my-child">
  <template>
    <section>
      <content></content>
    </section>
  </template>
  <script>
    Polymer({
      is: 'my-child',
    });
  </script>
</dom-module>

它们的建议用法如下：

<my-parent>
  <my-child>First tab</my-child>
  <my-child>Second tab</my-child>
  <my-child>Third tab</my-child>
</my-parent>

在线演示：http://jsbin.com/hibuzafapu/1/edit?html,output

生成的计算 HTML 代码如下所示：

<my-parent>
  <tabs>
    <my-child>
      <section>
        First tab
      </section>
    </my-child>
    <my-child>
      <section>
        Second tab
      </section>
    </my-child>
    <my-child>
      <section>
        Third tab
      </section>
    </my-child>
  </tabs>
</my-parent>

如果我没理解错的话，只有 <my-child> 标签包装 <section> 标签是多余的。目前，上述标签什么都不做，只是一个包装所有内容的块级元素（就像 div）。如果这让您感到困扰，那么您实际上可以省略 <section> 标签并将所有样式直接放在 <my-child> 标签上。

在这种情况下，计算得到的 HTML 看起来像这样：

<my-parent>
  <tabs>
    <my-child>
      First tab
    </my-child>
    <my-child>
      Second tab
    </my-child>
    <my-child>
      Third tab
    </my-child>
  </tabs>
</my-parent>

更新

为了给解决方案添加一些动态（adding/removing 选项卡），您有两个选择：使用 dom-repeat 并在 DOM 中标记项目，或者推送项目数组放入 my-parent 元素并在那里使用 dom-repeat。这两个选项与实施方式非常相似，并且它们的工作方式没有太大区别。

选项 A：浅色冲压 DOM:

两个自定义元素的定义保持不变，唯一的区别是您如何使用它们。与其对灯光进行硬编码 DOM，不如让它更具动态性。

<dom-module is="tmp-element">
  <template>
    <my-parent>
      <template is="dom-repeat" items="[[myItems]]">
        <my-child>[[item.content]]</my-child>
      </template>
    </my-parent>
  </template>
  <script>
    Polymer({
      is: 'tmp-element',
      ready: function() {
        this.myItems = [
          { content: "First tab" },
          { content: "Second tab" },
          { content: "Third tab" },
        ],
      };
    });
  </script>
</dom-module>

<tmp-element></tmp-element>

tmp-element 纯粹用于创建绑定范围并将数据馈送到 dom-repeat。

现场演示：http://jsbin.com/gafisuwege/1/edit?html,console,output enter link description here

选项 B：在父级内部冲压：

在此选项中，父级需要有一个额外的属性，我们将在其中提供项目数组。

my-parent 元素的新版本如下：

<dom-module id="my-parent">
  <template>
    <tabs>
      <template is="dom-repeat" items="[[items]]">
        <my-child>[[item.content]]</my-child>
      </template>
    </tabs>
  </template>
  <script>
    Polymer({
      is: 'my-parent',
      properties: {
        items: Array,
      },
    });
  </script>
</dom-module>

用法是：

<dom-module is="tmp-element">
  <template>
    <my-parent items="[[myItems]]"></my-parent>
  </template>
  <script>
    Polymer({
      is: 'tmp-element',
      ready: function() {
        this.myItems = [
          { content: "First tab" },
          { content: "Second tab" },
          { content: "Third tab" },
        ];
      },
    });
  </script>
</dom-module>

<tmp-element></tmp-element>

在这里，我还使用了 tmp-element（与以前不同的一个）来提供 my-parent 它的数据。

现场演示：http://jsbin.com/kiwidaqeki/1/edit?html,console,output

在 dom-repeat 中嵌套元素和动态内容 - Polymer 1.0

nesting elements and dynamic content inside dom-repeat - Polymer 1.0

polymer

polymer-1.0