0
ツールバーの左上にあるメニューボタンをクリックしてpaper-drawer
を切り替えたいとします。ポリマー2.0でエラーを定義する関数
"ReferenceError: _toggle is not defined at HTMLElement.onclick (http://null.jsbin.com/runner:1:1805)"
Here is the JSBin Demo:問題は、私は、コンソールに次のエラーを取得することです。
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>
クリックして「ジェスチャー...」をインポートする必要はありません。ただし、オンタップはタッチデバイスでも機能するため(マウスのクリックもサポートされているため)、オンクリックの代わりにオンタップを使用する方がよいでしょう。オンタップするには、「ジェスチャー...」のインポートが必要です。 – grohjy