代码之家 › 专栏 › 技术社区 › James

未捕获引用错误抽屉未在HTMLElement上定义。onclick in Polymer 2.0?

polymer-2.x custom-element onclicklistener polymer html

James · 技术社区 · 7 年前

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

其中之一是:

Uncaught ReferenceError: drawer is not defined at 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>

这在网站上是完全一样的,为什么它对他们有效,但对我无效。

单击菜单图标时出现问题。

1 回复 | 直到 7 年前

Kuba Å imonovský 6 年前

我建议你不要使用 onclick

他们提供了非常糟糕的方法,而您的代码无法工作的原因很可能是因为您正在使用 shadow 相反,他们使用的是dom shady

这意味着,你不能简单地做 document.getElemenetById("drawer").toggle(); 在阴影dom中。有 shadowRoots 它将整个元素包装到外部无法访问的块中。(除非您使用 shadowRoot 符号。)

不管怎样,为了使它工作,你必须做一些样板函数。

on-tap 而不是这只是聚合物函数。你的 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 随时可用 你必须延长 Polymer.GestureEventListeners

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

推荐文章

Kuba Å imonovský · Templatizer-如何多次渲染同一模板,Polymer 2。十、

6 年前

Riposte · 从单元渲染器迁移Vaadin网格聚合物元素

6 年前

AlexBenoit · 聚合物2条件属性

6 年前

Nikhil Raghavendra · Polymer 2.0数据绑定不工作

6 年前

user3310115 · 如何结合铁计时器和力矩js在聚合物中显示hh:mm:ss格式

6 年前

Yanko Ojeda · 如何在熨斗窗体内重置纸张下拉菜单?

6 年前

Matthew · 如何解决iron ajax响应延迟问题

6 年前

yberg · 使用nginx反向代理服务聚合物PWA

6 年前

Mason · 如何要求服务人员忽略与Polymer中特定URL模式匹配的请求?

6 年前

Yairopro · Web组件未显示

6 年前