Uncaught ReferenceError drawer is not defined at HTMLElement.onclick in Polymer 2.0?

Question

我是 Polymer 2.0 的新手，正在努力解决某些我似乎不理解的错误。

其中之一是：

Uncaught ReferenceError: drawer is not defined at HTMLElement.onclick

所以为了解释我的问题，我正在尝试使用 app-drawer，它会在单击事件时从左向右滑动。但是点击事件returns出现上面的错误。如何确定抽屉已定义？（顺便说一句，我正在关注 app-layout 部分主网站中提供的代码片段。- 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。

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

没关系，要使其工作，您必须执行一些样板功能。

首先，使用on-tap代替onclick。这只是聚合物功能。你的 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){}

Uncaught ReferenceError drawer is not defined at HTMLElement.onclick in Polymer 2.0?

Uncaught ReferenceError drawer is not defined at HTMLElement.onclick in Polymer 2.0?

html

onclicklistener

polymer

custom-element

polymer-2.x