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

原文 标签 html polymer polymer-2.x

如何使用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。

最佳答案

因为我的评论有点意思,所以我把它当作一个回答。
代码示例现在将在Polymer 1.9中,我将在切换到2.0时更新我的答案,但无论如何,这个想法应该是相同的
首先需要一个包装器元素,wich将能够从一个属性动态创建另一个元素,并将其添加到自身中。
在我的示例中,要创建的元素的名称将是来自xhr中的数据库的json对象数据的名为type的属性。
对于动态创建的元素,绑定将不起作用,因此必须手动完成。这就是_updateState函数的作用,这里它只更新一个属性,但思想是相同的,就是有更多的属性。
包装:

<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-module名称,第二个json对象将绑定到元素的属性。
this.appendChild(this.element);然后将其添加到dom中
所有这些都需要更平滑的显示
然后需要一个dom repeat来调用这个元素,并为它提供创建动态元素所需的数据。
这里有一个this.async的例子,但是您不需要特定的元素,这个逻辑可以在一个更大的逻辑中。
<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>

这样就可以了:)

相关文章:

javascript - Polymer Elements ShadowDOM子节点-动态设置样式属性

css - 将不同的样式应用于Polymer 2.0 Web组件的多个实例

python - 不支持的格式字符“;”。无法解决这个问题

javascript - 为什么这个简单的javascript函数无法实现预期的功能?

windows - 在窗户上安装聚合物

javascript - 聚合物Web组件内容单击事件未触发

javascript - dom更改元素顺序后,聚合物2铁选择器选择的元素不会更新

javascript - 铁要求不超过一个请求

html - 共享按钮上的CSS

javascript - 填充从jQuery上的选定多个选项隐藏的输入类型