Polymer - this.$[id] 不适用于动态生成的元素

Question

简而言之：

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

详情

我有：

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

我想要的：

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=...> 内或命令添加时。