我试图通过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>
我看到很多堆栈溢出posts类似于我想要完成的,但没有任何好结果,我也尝试过:
this.$.testComp
和
this.shadowRoot.querySelectorAll('#testComp')
确实会返回一个对象,但我不知道如何使用该结果。
我的最终目标是添加一个自定义事件侦听器,侦听从<ajax-service>
元素触发的事件。
我希望通过使用模板repeat = {{response}}将Ajax-service元素的结果处理成重复元素。我不希望Ajax-service元素重复,因此Ajax-service不在模板之外。
有人可以提出任何建议吗?
答案 0 :(得分:2)
<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元素。自定义元素中的第一个模板是shadowdom开始的位置。因此,对于使用这些选择器选择的任何项目,它必须位于元素的第一个模板中。稍后在元素原始模板中使用重复模板。
请记住,模板可以像上面的例子一样嵌套。