Polymer 1.0在重复中向子doms添加属性

Question

我有这种结构，我想绑定，说自定义属性或非标准属性，例如 或 some-new-attribute 由dom-repeat模板创建的子doms。我如何实现这一目标？

<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 属性是如何绑定的。

问题 如何将属性绑定到子doms，特别是当它们循环时？

Answer 1

您只需使用binding to native element attribute。

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

Answer 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>