Polymer starter-kit 2 Javascript 范围答案

【问题标题】：Polymer starter-kit 2 Javascript scopePolymer starter-kit 2 Javascript 范围
【发布时间】：2017-02-04 16:57:22
【问题描述】：

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

编辑 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()。我不确定为什么。

我怎样才能做到这一点？

【问题讨论】：

标签： javascript html scope polymer-starter-kit

【解决方案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>`

【讨论】：

我将 on-click 更改为 on-tap 现在它应该可以工作了
很好的跟进。

【解决方案2】：

以下内容对我有用。

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

我找到了以下链接，“Annotated event listener setup”。它有一个“提示”，上面写着，

提示：对于在触摸（移动）和点击（桌面）设备上持续触发的事件，请使用点击而不是点击。有关可靠的跨平台事件的完整列表，请参阅手势事件。

【讨论】：