Riot.jsのイベントハンドラ(onclick)にデータを渡す方法

Riot.js簡単でいいですね。コンポーネント単位で作成できるもの、見通しがよく作りやすいです。
コンポーネントを別ファイルで(.tag)保存することもできます。
コンポーネント内はHTML, CSS, JavaScriptを区別して書くことができるのでMVCっぽく作ることもできます。
非常に学習コストが低いのも利点ですね。ただし日本語のTipsがまだ少ないのが残念なところです。

今回はRiot.jsのイベントハンドラ(onclick, onsubmit, oninput)にデータを渡す方法です。
onsubmitやoninputは普通に取得できますが、問題はonclickです。
[html]

[/html]
こんなボタンのdata-idをイベントハンドラに渡したいのですがRiot.jsのリファレンスにはその記述はありません。

ズバリそのものがgithubのissueにありました。
How to call a function onclick and pass arguments

issue内のコメントによると方法は2つ

データセットを使う

[html]

handler(e) {
console.log(e.target.dataset.id); // 1
}
[/html]

bindを使う

[html]

handler(num, e){
console.log(num); // 1
}
[/html]

bindのほうが記述が短いのかな?
jQueryを使って何かしたいのであればdatasetのほうが使いやすいだろうし、それぞれの環境に合わせればいいと思います。

スポンサーリンク
レクタングル大




フォローする

スポンサーリンク
レクタングル大