Polymer 1.0 重复向子 dom 添加属性

Question

我有这个结构，我想绑定，比如自定义属性或非标准属性，如 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函数returns这个对象数组

[
 {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，特别是当它们循环时？

Answer 1

您的版本将设置属性。如您所见，它不会出现在 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>

Answer 2

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

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

Polymer 1.0 重复向子 dom 添加属性

Polymer 1.0 adding attributes to child doms in a repeat

polymer

polymer-1.0