在 Polymer 2.0 中定义函数时出错
Error defining function in Polymer 2.0
我想通过单击工具栏左上角的菜单按钮来切换 paper-drawer
。问题是我在控制台中收到以下错误:
"ReferenceError: _toggle is not defined
at HTMLElement.onclick (http://null.jsbin.com/runner:1:1805)"
http://jsbin.com/degifisici/1/edit?html,console,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="app-layout/app-layout.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="paper-item/paper-icon-item.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
</head>
<body>
<dom-module id="my-el">
<template>
<app-header reveals>
<app-toolbar>
<paper-icon-button icon="menu" onclick="_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>
</template>
<script>
class MyEl extends Polymer.Element {
static get is() { return 'my-el' }
constructor() {
super();
}
ready() {
super.ready();
}
_toggle() {
var drawer = this.$.drawer;
drawer.toggle();
}
}
customElements.define(MyEl.is, MyEl);
</script>
</dom-module>
<my-el></my-el>
</body>
</html>
将 onclick
更改为 on-click
,您可能还需要导入 gestures-event-listener
。
<link rel="import" href="polymer/lib/mixins/gesture-event-listeners.html">
我想通过单击工具栏左上角的菜单按钮来切换 paper-drawer
。问题是我在控制台中收到以下错误:
http://jsbin.com/degifisici/1/edit?html,console,output"ReferenceError: _toggle is not defined at HTMLElement.onclick (http://null.jsbin.com/runner:1:1805)"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="app-layout/app-layout.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="paper-item/paper-icon-item.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
</head>
<body>
<dom-module id="my-el">
<template>
<app-header reveals>
<app-toolbar>
<paper-icon-button icon="menu" onclick="_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>
</template>
<script>
class MyEl extends Polymer.Element {
static get is() { return 'my-el' }
constructor() {
super();
}
ready() {
super.ready();
}
_toggle() {
var drawer = this.$.drawer;
drawer.toggle();
}
}
customElements.define(MyEl.is, MyEl);
</script>
</dom-module>
<my-el></my-el>
</body>
</html>
将 onclick
更改为 on-click
,您可能还需要导入 gestures-event-listener
。
<link rel="import" href="polymer/lib/mixins/gesture-event-listeners.html">