How to2016.06.13

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

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

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

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

目次

onclockで引数を渡す方法
1. bindメソッドを使う
2. data属性に埋め込む
さいごに

onclockで引数を渡す方法

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

bindメソッドを使う

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

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

1
2
3
hello(name) {
  alert(name);
}

bindメソッドはIEの対応が9からなので、IE8を切り捨てできるような案件では問題なく使うことができます。
参考： [Function.prototype.bind() | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)

data属性に埋め込む

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

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

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

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

さいごに

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

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

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

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

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

https://github.com/riot/riot/issues/1001