fkm blog

software開発に関することを書いていきます

Ractive.jsで、コンポーネントを使う側でイベント設定したい

公式ドキュメント読んでも見つからなかったのでGithubのIssue探したら一応あった。

やりたいこと

こんな感じでコンポーネントにイベントを設定したい。1つの画面に同じコンポーネントは複数配置したい。

<MyButton
    on-click="login"/>
<MyButton
    on-click="signup"/>

コンポーネント側をどうするか

fire() を呼ぶようにすればいいみたい。

const MyButton = Ractive.extend({
    template: '<button on-click="@this._click()">Button!!</button>',
    _click: function() {
        this.fire('click'); // 属性のon-clickで設定されたイベントが実行される
    }
});