Question

我有一个自定义元素<y-list>可以触发事件'item-selected' 我在另一个自定义元素中使用此元素，当我尝试将eventlistener添加到此元素

时

<dom-module id="my-list">
 <template is="dom-if" if="{{show}}">
    <y-list list="{{list}}">
    </y-list>
    <hr>
 </template>
</dom-module>

Polymer({

is: 'my-list',

properties: {

  show: {
    type:Boolean,
    value:function() {
        return false
    }
  },
  list: {
    type:Array,
    value:[]
  }
},
ready: function(){
},
attached: function(){
   this.querySelector('y-list').addEventListener('item-selected', function(e){
   console.log(e.detail);
}   
});

我收到错误 Cannot read property 'addEventListener' of null

但如果我删除dom-if条件或使用hidden$我能够找到该元素并添加eventlistener并收听item-selected事件

我知道在准备好后调用了附件，所以我在附加中添加了事件监听器，但即使我为show设置true属性{i}，我也无法找到该元素

Answer 1

当dom-if的表达为false时，内容不存在。在这种情况下，最好将show绑定到类以隐藏CSS中的内容而不是删除它。隐藏的内容存在，可以使用this.$或this.$$

进行访问

this.querySelector('y-list')选择light DOM中的元素（使用<content>投影）。无论如何，最好使用Polymer.dom(this).querySelector()。

要从元素模板中进行选择，请使用this.$.someId，this.$$('some-selector')或Polymer.dom(this.root).querySelector ()

Answer 2

添加侦听器的另一种方法是using "on-event"：

<y-list list="{{list}}" on-item-selected="item_selected"></y-list>

Polymer：如何在条件模板下向自定义聚合物元素添加事件侦听器

2 个答案: