聚合物 - 这个。$ [id]不适用于动态生成的元素

Question

简而言之：

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

详情

我有什么：

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

我想要的是什么：

1. 每当更改modifiedElements时更新elements（✓）
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=...>内或强制添加时。