イベントハンドラーの割り当て

前回は、Cape.JS コンポーネントのデータを Ajax で初期化する方法について解説しました。

今回は、HTML 要素に対してイベントハンドラーを割り当てる方法について説明します。

テキストエディタで app/assets/javascripts/todo_list.es6 を開いてください。現時点では、render() メソッドは次のように定義されています。

  render(m) {
    m.ul(m => {
      this.tasks.forEach(task => {
        m.li(m => {
          m.label(m => {
            m.input({ type: 'checkbox', checked: task.done }).sp();
            m.span(task.title);
          });
        });
      });
    });
  }

これを次のように書き換えてください（m.label... の後ろに1行挿入）。

  render(m) {
    m.ul(m => {
      this.tasks.forEach(task => {
        m.li(m => {
          m.label(m => {
            m.onclick(e => this.toggleTask(task));
            m.input({ type: 'checkbox', checked: task.done }).sp();
            m.span(task.title);
          });
        });
      });
    });
  }

挿入されたのは次の1行です。

m.onclick(e => this.toggleTask(task));

この文は click イベントのハンドラーとして this.toggleTask(task) を割り当てます。その対象は、直後に仮想 DOM に追加される要素、すなわちチェックボックスです。

m.onclick((e) => { this.toggleTask(task) });

次に、イベントハンドラーを定義しましょう。引き続き app/assets/javascripts/todo_list.es6 を編集します。render() メソッド定義の下に次のコードを挿入してください。

  toggleTask(task) {
    window.alert(task.id);
  }

とりあえずチェックボックスのクリックにイベントハンドラーが反応するかどうかを確認するため、警告ダイアロー後を表示させています。

では、動作確認です。サーバーを起動し、ブラウザで http://localhost:3000/ を開きます。1番目のチェックボックスをクリックすると、次のように「1」が警告ダイアローグ内に表示されます。これは、タスクの id カラムの値です。

ちょっと中途半端ですが、今回はここで終わりです。次回は、このイベントハンドラーで Ajax コールを行って、タスクの done カラムの値を更新する方法について説明します。