もちろん、クリックできないボタンは、ボタンではありません。
ボタンを切り替えるには、イベントリスナーを追加します。Polymerでは、単純なon-event
アノテーションを持つイベントリスナーをエレメントのテンプレートに追加できます。
Polymerのon-click
アノテーションを使用してボタンのclick
イベントをリッスンするようにコードを変更しましょう:
icon-toggle.html
<iron-icon icon="[[toggleIcon]]" on-click="toggle"></iron-icon>
on-click
はonclick
とは異なります。 これは標準の element.onclick
プロパティと異なります。on-click
のダッシュはPolymerのアノテーション付きイベントリスナーであることを示しています。
上のコードは、ボタンが押されたときにtoggle
というメソッドを呼び出します。
次に、ボタンが押されたときにpressed
プロパティを切り替えるtoggle
メソッドを作成します。コンストラクタの後のIconToggle
のクラス定義内にtoggle
メソッドを配置します。
icon-toggle.html
toggle() {
this.pressed = !this.pressed;
}
これでコードは以下のようになるはずです:
icon-toggle.html
<script>
class IconToggle extends Polymer.Element {
static get is() {
return 'icon-toggle';
}
static get properties() {
return {
pressed: {
type: Boolean,
notify: true,
reflectToAttribute: true,
value: false
},
toggleIcon: {
type: String
}
}
}
constructor() {
super();
}
toggle() {
this.pressed = !this.pressed;
}
}
customElements.define(IconToggle.is, IconToggle);
</script>
icon-toggle.html
ファイルを保存し、デモをもう一度見てください。ボタンを押すと、押した状態と押していない状態を切り替えることができるはずです。

詳細: データバインディング デモがどのように動作するかを確認するにはdemo-element.html
を開いてみてください
(コードをダウンロードした場合、demo
フォルダにこのファイルがあります)。もちろん、このエレメントのデモ も エレメントです。
エレメントは、双方向データバインディングと
算出バインディングを使用して、ボタンが切り替わったときに表示されている文字列を変更します。