[英]Polymer querySelector can't find custom polymer element in polymer element
我正在尝试通过querySelector或等效方法在另一个元素中定义一个自定义的Polymer元素。 我的代码如下:
<polymer-element name="component-elem">
<!-- custom elem here -->
<ajax-service id="testComp"></ajax-service>
<template>
</template>
<script>
Polymer({
ready: function(){
var x = this.shadowRoot.querySelector('#testComp');
console.log(x); //always prints null
}
});
</script>
</polymer-element>
我已经看到了很多堆栈溢出的帖子 ,这些帖子与我要完成的任务类似,但是并没有取得很好的效果,我也尝试过:
this.$.testComp
和
this.shadowRoot.querySelectorAll('#testComp')
确实返回了一个对象,但是我不清楚如何使用结果。
我的最终目标是添加一个自定义事件侦听器,以侦听<ajax-service>
元素触发的事件。
我希望通过使用模板repeat = {{{response}}将Ajax-service元素的结果处理为重复元素。 我不想重复Ajax-service元素,因此Ajax-service在模板之外。
谁能提供任何建议?
<polymer-element name="component-elem">
<!-- custom elem here -->
<template>
<ajax-service id="testComp"></ajax-service>
<template repeat="{{response}}">
// html for looped items
<template if="{{response.data}}">
// do something with response.data
</template>
</template>
</template>
<script>
Polymer({
ready: function(){
var x = this.shadowRoot.querySelector('#testComp');
console.log(x); //always prints null
}
});
</script>
</polymer-element>
问题是由于您的元素模板中没有ajax元素。 customdom中的第一个模板是Shadowdom的起始位置。 因此,要使用这些选择器选择的任何项目都必须位于元素的第一个模板中。 稍后在元素原始模板中使用重复模板。
请注意,可以像上面的示例一样嵌套模板。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.