聚合物入门套件 2 Javascript 范围

Question

在我的-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>

当编辑 my-app.html 时，WebStorm 自动完成 finds this.$._j as this.$. _joesDrawerToggle()

但是，当我单击该按钮时，Chrome 开发工具显示：

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

似乎 index.html 需要了解 _joesDrawerToggle()。我不确定为什么。

我怎样才能让它工作？

Answer 1

改变

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

到

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

Answer 2

以下对我有用。

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

我找到了以下 link、“Annotated event listener setup”。它有一个 "Tip" 表示，

Tip: Use on-tap rather than on-click for an event that fires consistently across both touch (mobile) and click (desktop) devices. See gesture events for a complete list of reliable, cross-platform events.

聚合物入门套件 2 Javascript 范围

Polymer starter-kit 2 Javascript scope

html

javascript

scope

polymer-starter-kit