Ractive.jsで、ボタンクリック時のイベントを設定する

最終更新日:2015-08-09

テンプレート内のボタンなどにクリックイベントを指定できます。

<script id="myTemplate" type="text/ractive">
  <button on-click="start">Start</button>
</script>

<script>
  var ractive = new Ractive({
    el : '#container',
    template : '#myTemplate'
  });
  ractive.on({
    start : function() {
      alert('Clicked!');
    }
  });
</script>

順にみていきましょう。

テンプレートにon-clickを指定する

on-click="イベント名"で、クリック時にどのイベントを実行するかを指定します。

<script id="myTemplate" type="text/ractive">
  <button on-click="start">Start</button>
</script>

イベントに対しどの処理を行うか指定する

先ほど指定したイベント名が実際にどのような処理を行うかの指定は、Ractiveオブジェクトのonメソッドで指定します。

ractive.on({
  start : function() {
    alert('Clicked!');
  }
});