聚合物 - this.$[id] 不适用于动态生成的元素 [重复]

Question

简而言之：

在 Polymer 中，我无法让 this.$[id] 查询动态生成的元素，而 this.shadowRoot.querySelector("#"+id) 可以毫无问题地完成这项工作。为什么？

详细介绍

我有什么：

• 已发布的数组elements
• 另一个数组 modifiedElements 包含基于第一个数组的数据
• repeat 在第二个数组上生成的 HTML 块

我想要什么：

1. 每当elements 更改时更新modifiedElements (✓)
2. 相应地更新 HTML (✓)
3. 查询新块（对于某些交互）（不太✓）

我的聚合物元素：

<polymer-element name="my-sorted-elements" attributes="elements">
    <template>
        <template repeat="{{el in modifiedElements}}">
            <div class="heading" on-click="{{toggle}}" target="collapse{{el.name}}">{{devices.name}}</div>
            <core-collapse id="collapse{{el.name}}">
                {{el.info}}
            </core-collapse>
        </template>
    </template>
</polymer-element>

...及其脚本：

Polymer('my-element', {

    ready: function() {
        this.modifiedElements = [];
        this.modifyElements();
    },

    elementsChanged: function() {
        this.modifyElements();
    },

    modifyElements: function() {
        for (var e in this.elements) {
            el = this.elements[e];
            // ... do stuff on el ...
            this.modifiedElements.push(el);
        }
    },

    toggle: function(event, detail, sender) {
        // This works:
        this.shadowRoot.querySelector("#"+sender.attributes['target'].value).toggle();
        // This doesn't (not found):
        this.$[sender.attributes['target'].value].toggle();
    }
})

知道为什么第二种方法在toggle 中不起作用吗？我应该以某种方式更新this.$，还是有更好的方法来完成整个事情？

Answer 1

这是设计的。 this.$['id'] 不应该对动态添加的元素起作用，例如当它们在 <template repeate=...>、<template if=...> 内部或强制添加时。