CODEWITHSUNDEEP
polymer
user4660892
user4660892

Reputation:

Polymer: How to add event listeners to custom polymer element under conditional template

I have a custom element <y-list> which fires an event 'item-selected' i am using this element in another custom element and when i try to add eventlistener to this element

<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);
}   
});

i am getting the error Cannot read property 'addEventListener' of null

but if i remove dom-if condition or use hidden$ i am able to find the element and add the eventlistener and listen to item-selected event

I know that attached is called after ready so i am adding event listener in attached but i am unable to find the element even if i set the show attribute to true for <my-list>

Upvotes: 2

Views: 5272

Answers (2)

Goce Ribeski
Goce Ribeski

Reputation: 1372

Another approach to add listener is using "on-event":

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

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657128

When the expression of the dom-if is false the content doesn't exist. In this case it works better to bind show to a class to hide the content usin CSS instead of removing it. Hidden content exists and can be accessed using this.$ or this.$$

this.querySelector('y-list') selects elements in the light DOM (projected using <content>). It's better to use Polymer.dom(this).querySelector() anyway.

To select from the elements template use this.$.someId, this.$$('some-selector') or Polymer.dom(this.root).querySelector ()

Upvotes: 3

Related Questions