Polymer starter-kit 2 Javascript scope

Question

In my-app.html

...

<paper-icon-button icon="my-icons:menu"  onclick="this.$._joesDrawerToggle()"></paper-icon-button>

...

<script>
  Polymer({
    is: 'my-app',

    ...

    _showPage404: function() {
      this.page = 'view404';
    },


    _joesDrawerToggle: function () {

      if (this.$.drawer.opened) {
        this.$.drawer.close();
      }else{
        this.$.drawer.open();
      }

    }
  });
</script>

When editing my-app.html, WebStorm auto-complete finds this.$._j as this.$._joesDrawerToggle()

However, when i click the button, Chrome Dev Tools says:

Uncaught TypeError: this.$._joesDrawerToggle is not a function
    at HTMLElement.onclick ((index):1)
onclick @ (index):1

It seems index.html needs to know about _joesDrawerToggle(). I am not sure why.

How can i make this work?

Answer 1

change

<paper-icon-button icon="my-icons:menu"  onclick="this.$._joesDrawerToggle()"></paper-icon-button>

to

<paper-icon-button icon="my-icons:menu"  on-tap="_joesDrawerToggle"></paper-icon-button>`