Search code examples
javascriptfunctionpolymer

Polymer - bubbleEvent is not a function

I know this is a newb question, but I just don't understand and neither do other similar questions help on this site...

So I have a Polymer object and I'm doing:

  connectedCallback() {
    super.connectedCallback();
    Polymer.RenderStatus.afterNextRender(this, () => {
      this.addSubComponentEventListeners();
      this.addEventListener('connection-type-changed', (e) => {
        this.bubbleEvent(e);
      });
    });
  }

  addSubComponentEventListeners() {
   //adding stuff
  }

  bubbleEvent(e) {
    console.log(`Bubblin': ${e}`);
    this.fire(e);
  }

For some reason that I cannot understand, even though I have both of the functions declared on the same scope, however addSubComponentEventListeners runs without a problem and I get an error for bubbleEvent saying this.bubbleEvent() is not a function. Can someone please explain how it's not a function? Is it on a different scope? Why? How to make it run?

Solution

  • this.bubbleEvent is in an anonymous function, so I make the assumption that you're in the wrong scope. Try binding the function.

     this.addEventListener('connection-type-changed', (e) => {
    this.bubbleEvent(e);
  }.bind(this));