Question

我有一个名为edit-box的Polymer元素，它根据传入数据充当一组未指定元素的容器。

<link rel="import" href="/assets/bower_components/polymer/polymer.html">
<link rel="import" href="/assets/elements/field-text.html">
<link rel="import" href="/assets/elements/field-hidden.html">

<polymer-element name="edit-box" attributes="dataFields">
    <template>
        <template repeat="{{dataField in dataFields}}">
            <field-{{dataField.Type}}></field-{{dataField.Type}}>
        </template>
        <input type="button" value="Save" />
    </template>
    <script>
        Polymer('edit-box', {
            ...
        }
    </script>
</polymer-element>

dataField.Type可能是“text”或“hidden”等等。

我创建了其他聚合物元素，称为字段文本和字段隐藏等。

这只是基本的想法，我知道它没有被抛光。如何循环遍历我的dataField并根据该数据集中存在的内容在此编辑框容器元素中呈现不同的元素？

Answer 1

绑定到像这样的元素名称会非常酷，但这是不可能的。 Polymer的内部Node.bind() library需要一个属性，TextNode等来绑定。在<field-{{dataField.type}}>的情况下，{{}}没有意义，因为没有什么可以锁定的。

您可以实现所需目标的一种方法是使用条件模板：

<template repeat="{{dataField in dataFields}}">
  <template if="{{dataField.type == 'text'}}">
    <field-text></field-text>
  </template>
  <template if="{{dataField.type == 'chart'}}">
    <field-chart></field-chart>
  </template>
</template>

http://jsbin.com/yuqinoxa/1/edit

更好的方法是创建一个通用元素，并为其绑定一个type属性：

<template repeat="{{dataField in dataFields}}">
  <field-element type="{{dataField.type}}"></field-element>
</template>

http://jsbin.com/tirokuso/1/edit

聚合物：如何创建动态重复元素？

1 个答案: