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

More than 3 years have passed since last update.


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');


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