Question

我有一个<parent>元素，里面有一个<tabs>元素，带有任意数量的标签（纯粹用于在UI中隐藏/显示逻辑），每个元素内部都有一个<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>的{{1}}个实例（<tabs>仅从<parent>接收一个数组并迭代它。

<{1}}的本地DOM中是否有不硬编码<child>的方法？考虑使用<tabs>和轻型DOM，但不知道从哪里开始。这是一条很有前途的路线吗？

期望状态：

<content>

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>

<强>更新

为了向解决方案添加一些动态（添加/删除标签），您有两个选择：使用dom-repeat并在light DOM中标记项目，或将items数组推送到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它的＆＃39}。数据

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

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

1 个答案: