Polymer 1.0不能访问嵌套模板中的元素.元素
Polymer 1.0 can't access elements within nested <template> element
我使用的是Polymer 1.0,我正在构建一个小手风琴的例子。我已经将数据绑定到手风琴文本,我只是想在点击手风琴时改变它的图标。
下面是我的代码<dom-module id="ab-accordion">
<template>
<iron-ajax
auto
handle-as="json"
on-response="handleResponse"
debounce-duration="300"
id="ajaxreq"></iron-ajax>
<template is="dom-repeat" id="accordion" items="{{items}}" as="item">
<div class="accordion" on-click="toggleParentAcc">
<div id="accordion_header" class="accordion__header is-collapsed">
<i class="icon icon--chevron-down"></i>
<span>{{item.name}}</span>
</div>
<div id="standard_accordion_body" class="accordion__body can-collapse">
<div class="accordion__content">
<content id="content"></content>
</div>
</div>
</div>
</template>
</template>
<script>
Polymer({
is: "ab-accordion",
//Properties for the Element
properties: {
accordian: Object,
childaccordions: Object,
// Param passed in from the element - Set if the accordion is open by default.
open: String,
data: String,
reqUrl: {
type: String,
value: "https://example.com/service.aspx"
},
},
ready: function () {
this.items = [];
},
attached: function () {
// Run once the element is attached to the DOM.
},
toggleParentAcc: function (event) { // Toggle the classes of the accordions
//This is where I want to toggle the class
this.$.accordion_header.classList.toggle('is-collapsed');
if (typeof event !== 'undefined') {
event.stopPropagation(); // Stop the click from going up to the parent.
}
},
handleResponse: function (e) {
this.items = e.detail.response.sports;
}
});
</script>
</dom-module>
基本上在toggleParentAcc
函数中,我想切换ID为accordion_header
的div类。但我得到的是undefined或null。
我试了以下两行:
this.$.accordion_header // #1
this.$$('#accordion_header') // #2
如何访问dom-repeat中的元素?
UPDATE:我甚至不能访问附加函数中的when中的元素。
attached: function(){
this.$.accordion_header // This is null?!
this.$$('#accordion_header'); // this is also null!
}
https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#node-finding
注意:使用数据绑定动态创建的节点(包括dom-repeat和dom-if模板中的节点)不会添加到this中。美元的散列。该散列仅包括静态创建的本地DOM节点(即在元素最外层模板中定义的节点)。
我认为如果你用Polymer.dom(this.root)
代替会更好。此外,我建议您不要在dom-repeat
中使用静态id,因为它们是唯一的。
看起来您可能会遇到事件重定向,这发生在事件"冒泡"向上DOM树时。阅读本文档了解更多信息。
当我遇到这个问题时,我使用如下命令来解决:
var bar = Polymer.dom(event).path[2].getAttribute('data-foo');
在我的Polymer()
函数中
要在您的情况下弄清楚它,您应该转到控制台并搜索DOM树/事件日志以找到您的目标。如果您在定位控制台的正确区域时遇到困难,请发表评论,我可能会进一步提供帮助。
我最终想出了一种不用在嵌套模板中选择元素的方法。
<template id="accord_template" is="dom-repeat" items="{{items}}" as="item">
<ab-accordion-row id="[[item.id]]" name="[[item.name]]" open="[[item.open]]">
</ab-accordion-row>
</template>
ab-accordion是另一个元素,我只是给它提供数据,然后我可以根据参数更改类。
<div id="accordion" class="accordion" on-click="toggleAccordion">
<div class$="{{getClassAccordionHeader(open)}}">
<i class="icon icon--chevron-down"></i>
<span>{{name}}</span>
</div>
<div id="standard_accordion_body" class$="{{getClassAccordionChild(open)}}">
<div class="accordion__content">
<content></content>
</div>
</div>
</div>
试试这个
toggleParentAcc: function (event) { // Toggle the classes of the accordions
//This is where I want to toggle the class
var header = event.target.parentElement;
Polymer.dom(header).classList.toggle('is-collapsed');
// rest of your code
}
相关文章:
- 如果类不是一个选项,如何在使用 jQuery 时控制(避免)嵌套 html 元素的样式
- 如何在html angular中显示嵌套的json元素
- KnockoutJS:为虚拟元素使用嵌套的条件if语句
- 滚动所有嵌套的滚动条,使HTML元素进入视图
- 选择具有重新成角度或成角度的嵌套阵列元素
- 多个嵌套元素上的jQuery.text('')
- jQuery对嵌套在<李>并且<a>元素,同时离开父<ul>打开
- 量角器 - 根据条件识别嵌套下拉元素时超时
- 使用 jquery 更改嵌套在随机 html 元素中的 html 元素
- 如何在不丢失格式的情况下连续淡入() 元素文本的每个字符,包括嵌套元素
- 如何选择嵌套了两个 .each() 函数的多个元素
- 选择嵌套元素
- iframe作为pre元素的嵌套元素
- 如何在同一个表中显示这两个嵌套ng重复的元素
- Protractor-如何选择嵌套严重的下拉元素
- 使用 javascript 通过 tag->id->element 获取嵌套元素
- 验证嵌套在ng中的输入元素repeat也用于页面加载,而不仅仅用于更改
- SVG:<使用>元素嵌套在g中时不起作用(带小提琴!
- 多元素嵌套列表的自定义排序
- 如何选择一个特定的元素嵌套表在html中使用jquery