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

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

他们提供了非常糟糕的方法,并且你的代码无法工作的原因是因为你使用的是shadowdom,而是使用shadydom.

这意味着,你不能简单地做document.getElemenetById("drawer").toggle();影子dom.有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){}