Question

我是聚合物2.0的新手，我正试图解决我似乎不理解的某些错误。

其中一个就是这个：

Uncaught ReferenceError: drawer is not defined at HTMLElement.onclick

为了解释我的问题，我尝试使用 app-drawer ，它会在点击事件中从左向右滑动。但click事件会返回上述错误。如何确定抽屉的定义？（顺便说一句，我正在关注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){}

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

1 个答案: