😀

Riot.jsのonclickでテンプレートから引数を渡す方法

2016/06/13に公開

最近ちょっとしたJSを書くときは、Riot.jsを使う機会が増えてきました。

Riot.jsは軽量で学習コストが少ないこともあり、すぐにでも使いはじめることができます。

そんな矢先onclickで関数を定義して、テンプレートから引数を渡す方法がわからなかったので、調べてみました。

onclockで引数を渡す方法

onclickで実行する関数に引数を渡す方法は2つあります。

Riot.jsに限らずReact.jsでもテンプレートから引数を渡す時に使われる手法。

<a href="#" onclick={ hello.bind(this, 'koji') }>koji</a>;

hello(name) {
  alert(name);
}

bindメソッドはIEの対応が9からなので、IE8を切り捨てできるような案件では問題なく使うことができます。
参考： Function.prototype.bind() | MDN

関数に直接引数を渡すことはできませんが、data属性として値を埋め込むことで、関数側で値を受け取ることができます。

<a href="#" data-name="koji">koji</a>

hello(e) {
  var name = e.currentTarget.getAttribute("data-name");
  alert(name);
}

引数の数が増えてきた時は、個人的には前述のbindを使ったほうがわかりやすいかなと思っています。

bindメソッドとdata属性、どちらの方法をとるかは好みの部分もでてきますね。

チームで開発するときには、あらかじめどちらの方法を取るか、決めておくのが良さそうです。

テンプレートから引数わたしたい時って結構ありますよね。

公式サイトには記述が見当たらなかったから、載せてあるといいんだけどな。

今回こちらのissueを参考にしました。