dom-repeat 中的聚合物动态元素名称答案

【问题标题】：Polymer dynamic element name in dom-repeatdom-repeat 中的聚合物动态元素名称
【发布时间】：2019-06-28 16:57:59
【问题描述】：

如何使用 dom-repeat 为铁页创建不同的元素？像这样：

<template is="dom-repeat" items="{{pages}}">
  <[[item.name]]></[[item.name]]>
</template>

...

pages: {
  type: Array,
  value() {
    return [
      {
        "name": "element-a",
      },
      {
        "name": "element-b",
      },
      {
        "name": "element-c",
      },
},

我正在使用聚合物 2.0。

【问题讨论】：

您可以通过 Javascript 来完成。 <div id="pages"></div>and forEach 在 div 上附加您想要的自定义元素。
谢谢！现在的问题是它在创建父 div 之前运行 js，那么如何在中调用聚合物函数，以便仅在 div 加载后运行 js？
检查是否是div后面的script标签。喜欢：<div id="pages"></div><script src="index.js"></script>
虽然这种方法可以工作，但性能将低于 dom-repeat。我们在一个项目中遇到了同样的问题，并完成了使用带有包装器元素的 dom-repeat，该包装器元素将名称作为属性，然后实例化并将正确的元素添加到自身。如果有人感兴趣，我可以在答案中详细说明。如果性能不是问题，那么我认为两者或多或少是相同的。
@Arfost 如果您可以将其详细说明为很棒的答案！我仍然是聚合物的初学者，正在努力解决这个问题。

标签： html polymer polymer-2.x

【解决方案1】：

因为我的评论有点意思，所以我把它作为答案。

代码示例现在将在聚合物 1.9 中，当我切换到 2.0 时我会更新我的答案，但无论如何想法应该是相同的

首先你需要一个包装元素，它能够从一个属性动态创建另一个元素，并将其添加到自身。在我的示例中，要创建的元素的名称将是一个名为 type 的 JSON 对象 Data 的属性，该对象来自 XHR 中的数据库。

对于动态创建的元素，绑定将不起作用，因此您必须手动完成。这就是 _updateStatefunction 的用途，这里它只更新一个属性，但想法是一样的，还有更多。

包装器：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../styles/shared-styles.html">

<dom-module id="element-wrapper">
    <template></template>
    <script>
        Polymer({
            is: 'element-wrapper',
            properties: {
                elementData: {
                     type: Object
                },
                saveFbPath: {
                    type: String
                },
                element: {
                    type: Object
                },
                formSubmitPressed: {
                    type: Boolean,
                    value: false
                }
            },
            observers: [
                '_updateState(elementData.*)'
            ],
            attached: function () {
                console.log("creating element : ", this.elementData);
                this.async(function () {
                    this.element = this.create(this.elementData.type, {
                        "data": this.elementData
                    });
                    this.appendChild(this.element);
                }.bind(this));
            },
            _updateState: function (elementData) {
                if (typeof this.element !== "undefined") {
                    this.element.data = elementData.value;
                    console.log('Change captured', elementData);
                }
            }
        });
    </script>
</dom-module>

this.element = this.create(this.elementData.type, {"data":this.elementData}); 行是创建元素的行，第一个参数是dom-modulename，第二个参数是一个 JSON 对象，它将绑定到元素的属性。 this.appendChild(this.element);然后将其添加到 dom 中

所有这些都在 this.async 调用中以获得更流畅的显示

然后你需要一个 dom-repeat 来调用这个元素，并给它创建动态元素所需的数据。这是element-list 的示例，但您不必为此需要特定元素，此逻辑可以更大。

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../styles/shared-styles.html">

<link rel="import" href="element-wrapper">
<dom-module id="element-list">
    <template>
        <style is="custom-style" include="shared-styles"></style>
        <template is="dom-repeat" items="[[ datas ]]" initial-count="10" as="data">
            <element-wrapper element-data="[[data]]"></element-wrapper>
        </template>
    </template>
    <script>
        Polymer({
            is: 'element-list',
            properties: {
                datas: {
                    type: Array,
                    value: function () {
                        return [];
                    }
                }
            }
        });
    </script>
</dom-module>

这应该可以解决问题:)

【讨论】：