Polymer 1.0 重复向子 dom 添加属性答案

【问题标题】：Polymer 1.0 adding attributes to child doms in a repeatPolymer 1.0 重复向子 dom 添加属性
【发布时间】：2015-08-19 06:18:57
【问题描述】：

我有这个结构，我想绑定自定义属性或非标准属性，例如 for 或 some-new-attribute 到由 dom-repeat 模板创建的子 dom。我如何做到这一点？

<dom-module id="card-list">

<template>
    <li>Some Text</li>
    <template is="dom-repeat" items="{{items}}" >
        <li id="{{ item.text }}" for="{{ item.text }}">{{ item.text }}</li>
    </template> 
</template>

<script>
Polymer({
    is: "card-list",
    extends:"ul",
    ready: function() {
      this.items = magically_get_an_array_of_objects();
    },
});
</script>

</dom-module>

如果magically_get_an_array_of_texts 函数返回这个对象数组

[
 {text:"foo"},
 {text:"bar"}
]

生成的模板将是这个

<ul is="card-list">
    <li>Some Text</li>
    <li id="foo">foo</li>
    <li id="bar">bar</li>
</ul>

注意 for 属性是如何未绑定的。

问题如何将属性绑定到子 dom，尤其是在循环时？

【问题讨论】：

标签： polymer polymer-1.0

【解决方案1】：

您可以简单地使用binding to native element attribute。

for$="{{ item.text }}"

【讨论】：

我不知道这个解决方案。它比我的简单，而且有效。
哇，当我开始阅读文档时，我没有看到这一点，很好的发现。谢谢:)

【解决方案2】：

您的版本将设置一个属性。正如您所注意到的，它不会显示在 HTML 中，但它会作为属性提供。 document.querySelector("#foo").for 将打印 foo。如果要使用自定义属性，则需要扩展<li> 元素，定义for 属性并将reflectToAttribute 设置为true。

<script>
    Polymer({
        is: "card-li",
        extends:"li",
        properties: {
            for: {
                type: String,
                reflectToAttribute: true
            }
        }
    });
</script>

然后像这样使用它。

<li is="card-li" id="{{ item.text }}" for="{{ item.text }}">{{ item.text }}</li>

【讨论】：

啊，这很有意义，谢谢你澄清了很多事情。