Step 4: インプットに反応させる

もちろん、クリックできないボタンは、ボタンではありません。

ボタンを切り替えるには、イベントリスナーを追加します。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フォルダにこのファイルがあります）。もちろん、このエレメントのデモ も エレメントです。 エレメントは、双方向データバインディングと 算出バインディングを使用して、ボタンが切り替わったときに表示されている文字列を変更します。