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

Question

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

其中之一是:

未捕获的 ReferenceError:未在 HTMLElement.onclick 中定义抽屉

所以为了解释我的问题，我正在尝试使用 app-drawer，它会在点击事件时从左向右滑动。但是点击事件返回了上面的错误。如何确定抽屉已定义？ (顺便说一句，我正在按照 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。

这意味着，您不能简单地在 shadow dom 中执行 document.getElemenetById("drawer").toggle();。 shadowRoots 将整个元素包装到一些无法从外部访问的 block 中。 (除非您使用 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){}