Polymer:如何在条件模板下将事件监听器添加到自定义 polymer 元素

Question

我有一个自定义元素 <y-list>触发事件 'item-selected'我在另一个自定义元素中使用此元素，当我尝试向此元素添加事件监听器时

<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$我能够找到该元素并添加事件监听器并监听 item-selected事件

我知道附加是在准备好后调用的，所以我在附加中添加事件监听器，但即使我设置 show 我也无法找到该元素属性为true对于 <my-list>

Answer 1

当表达式为dom-if时是 false该内容不存在。在这种情况下，绑定(bind) 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 ()