在 Polymer 2.0 的 HTMLElement.onclick 中未定义未捕获的 ReferenceError 抽屉？

Question

我对 Polymer 2.0 还很陌生，我正在努力解决一些我似乎不理解的错误。

其中一个是这样的：

Uncaught ReferenceError: drawer is not defined at HTMLElement.onclick

所以为了解释我的问题，我尝试使用 app-drawer 在点击事件中从左向右滑动。但是点击事件返回上述错误。如何确保抽屉已定义？ （顺便说一句，我正在关注app-layout 部分主网站中提供的代码 sn-p。-https://www.webcomponents.org/element/PolymerElements/app-layout）。

这是我的代码：

<app-header reveals>
  <app-toolbar>
    <paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
    <div main-title>My app</div>
    <paper-icon-button icon="delete"></paper-icon-button>
    <paper-icon-button icon="search"></paper-icon-button>
    <paper-icon-button icon="close"></paper-icon-button>
    <paper-progress value="10" indeterminate bottom-item></paper-progress>
  </app-toolbar>
</app-header>
<app-drawer id="drawer" swipe-open></app-drawer>

这在网站上完全一样，为什么它对他们有用，但对我不起作用。

当我点击菜单图标时出现问题。

请帮忙。

谢谢

Answer 1

我建议你不要使用onclick..

他们提供了非常糟糕的方法，您的代码无法正常工作的原因可能是因为您使用的是shadow dom，而不是他们使用的是shady dom。

这意味着，你不能简单地在 shadow dom 中做document.getElemenetById("drawer").toggle();。有shadowRoots 将整个元素包装到某个无法从外部访问的块中。 （除非你使用shadowRoot 表示法。）

没关系，要让它工作，你必须做一些样板函数。

首先，使用on-tap 而不是onclick。这只是 Polymer 功能。你的paper-icon-button 会是这样的：

<paper-icon-button icon="menu" on-tap="openDrawer"></paper-icon-button>

然后，定义函数openDrawer:

openDrawer: function() {
  this.$.drawer.toggle();
}

就是这样。值得一提的是，如果您在 Polymer 2.0 中使用原生元素，您应该使用 on-click 监听器。如果你想使用on-tap，你必须扩展Polymer.GestureEventListeners。

class somElement extends Polymer.GestureEventListeners(Polymer.Element){}