Ractive.jsでイベントを拾う方法まとめ

1. イベントハンドラをテンプレートに設定する方法

template

<div id="container">
  <script id="template" type="text/ractive">
     <div on-click="fire">イベントハンドラを付与</div>
  </script>
</div>

ractive.js

var ractiveModel = new Ractive({
  el: '#container',
  template: '#template'
});

ractiveModel.on('fire', function(event){
  console.log(event);
});

2. イベントハンドラとメソッドをテンプレートに設定する方法

template

<div id="container">
  <script id="template" type="text/ractive">
     <div on-click="fire()">イベントハンドラとメソッドを付与</div>
  </script>
</div>

ractive.js

var ractiveModel = new Ractive({
  el: '#container',
  template: '#template',
  fire: function() {
    console.log(this);
  }
});

3. データバインド中のオブジェクトを監視する方法

template

<div id="container">
  <script id="template" type="text/ractive">
     <div> {{target}} </div>
  </script>
</div>

ractive.js

var ractiveModel = new Ractive({
  el: '#container',
  template: '#template',
  data: {
    target: 'abcdefg'
  }
});

ractiveModel.observe('target', function(value){
  console.log(value);
});

// 値を書き換えた瞬間にイベントが発生する
ractiveModel.set('target', 'xxxxxx');

その他にもあるようなので、把握次第追記します。