CODEWITHSUNDEEP
polymerpolymer-2.x
abcd_1234
abcd_1234

Reputation: 175

Polymer 2.0 : listeners not working

<dom-module id="polymer-starterkit-app">
  <template>
    <style>
        :host {
        display: block;
        }
        #box{
            width: 200px;
            height: 100px;
            border: 1px solid #000;
        }  
    </style>
    <h2>Hello, [[prop1]]!</h2>
    <paper-input label="hello">

    </paper-input>

    <div id="box" on-click="boxTap"></div>
  </template>

  <script>
    /** @polymerElement */
    class PolymerStarterkitApp extends Polymer.Element {
      static get is() { return 'polymer-starterkit-app'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'polymer-starterkit-app'
          },
          listeners:{
            'click':'regular'
          },
          regular:function(){
              console.log('regular')
          }    

        };


      }
     boxTap(){
        console.log('boxTap')
     }

    }

    window.customElements.define(PolymerStarterkitApp.is, PolymerStarterkitApp);
  </script>
</dom-module>

As shown in the code above, I have tried to define a simple listener on-tap on my div with the class box but it doesn't seem to work! I think I'm using the wrong syntax. Also, why should we use listeners if we can simply use predefined listeners like on-click and on-tap? I would really appreciate any type of help!

Upvotes: 4

Views: 3741

Answers (2)

MajorBreakfast
MajorBreakfast

Reputation: 930

Edit: I helped updating Polymer's documentation. It's now very clear and detailed. https://www.polymer-project.org/2.0/docs/devguide/events#imperative-listeners Just read that and you're good. TL;DR: The listeners object is no more in Polymer 2.0, but there's a new way to do it.

You could simply set them up in ready(). There is no need to use .bind() in this case because this will be your custom element in the callback because it's the event's current target.

ready () {
  super.ready()
  this.addEventListener('my-event', this._onMyEvent)
}

_onMyEvent (event) { /* ... */ }

If you need to listen for events on something that is not your custom element itself (e.g. window), then do it the way it is shown in the Polymer documentation:

constructor() {
  super();
  this._boundListener = this._myLocationListener.bind(this);
}

connectedCallback() {
  super.connectedCallback();
  window.addEventListener('hashchange', this._boundListener);
}

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('hashchange', this._boundListener);
}

Source: https://www.polymer-project.org/2.0/docs/devguide/events#imperative-listeners

Upvotes: 6

Omar Licona Islas
Omar Licona Islas

Reputation: 1

You must create the listener manually 

connectedCallback() {
    super.connectedCallback();
    this.addEventListener('click', this.regular.bind(this));
}

disconnectedCallback() {
    super.disconnetedCallback();
    this.removeEventListener('click', this.regular);
}

regular() {
    console.log('hello');
}

However, to add a listener to an element like the div, you need to add Polymer.GestureEventListeners

class PolymerStarterkitApp extends Polymer.GestureEventListeners(Polymer.Element) {

}

Upvotes: -1

Related Questions