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

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

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

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

onclockで引数を渡す方法

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

bindメソッドを使う

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属性に埋め込む

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

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

hello(e) {
var name = e.currentTarget.getAttribute("data-name");
alert(name);
}
引数の数が増えてきた時は、個人的には前述のbindを使ったほうがわかりやすいかなと思っています。

さいごに

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

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

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

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

今回こちらのissueを参考にしました。 How to call a function onclick and pass arguments · Issue #1001 · riot/riot · GitHub

コウジ
Vue.jsが好きなフリーランスのフロントエンドエンジニアです。 フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。
目次
    Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発