gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 12:24:48 25 4
gpt4 key购买 nike

<分区>

简而言之:

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

详情

我有什么:

  • 已发布的数组元素
  • 另一个数组 modifiedElements 包含基于第一个的数据
  • 通过 repeat 在第二个数组上生成的 HTML block

我想要的:

  1. 每当 elements 更改时更新 modifiedElements (✓)
  2. 相应地更新 HTML (✓)
  3. 查询新 block (用于某些交互)(不完全是 ✓)

我的 polymer 元素:

<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.$,还是有更好的方法来完成整个事情?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com