【メモ】Riot.jsのイベントAPIについて覚書

はじめに

とあるRailsアプリケーションのフロント側の描画にRiot.jsを利用していたんですが、ちょっと勘違いしてたところがあったのでその備忘録です。
なお、この話で出てくるRiot.jsのバージョンは3系統なので、4系統はまた違った挙動になるかもしれないのでご注意ください。

経緯

Riot.jsは大雑把に言うと独自のタグを設定し、そのタグ内でHTMLやJavaScriptやスタイルなどを記述することで、ページの構成要素を包括・細分化できるというライブラリです。
それで、その独自タグをマウントする前やマウント直後のタイミングなどで特定の処理を走らせるためのイベントAPIがいくつか用意されています。詳しくはこちら。

自分は独自タグのマウント直後にRailsに用意したAPIと通信する処理を実装しており、その返り値によってページの描画する内容を変えるような作りになっていたのですが、処理が上手くいく時といかない時があり、はて？と疑問符を浮かべてました。

原因、解決

問題は至って単純で、イベントの仕様を正しく理解していなかったことが原因でした。
例えばmountイベントは『ページにタグがマウントされた直後』に実行されるイベントですが、これはあくまでそのタイミングでmountイベント内に記述されたコードが実行され始めるということであり、処理が完了するまで待ってくれるものではないということです。非同期な処理ってやつですね。

自分はここにAPIとの通信という処理に時間がかかるコードを記述していたので、APIからのレスポンスを受け取る前にページの描画を始めてしまい、ページの表示が意図しない形になってしまっていたということでした。
なので、何らかの処理の実行結果を待つ必要がある場合は、オブザーバブル機能を利用してイベントの監視をするといいかもしれません。

ちなみに自分は以下のような感じで、APIとの通信の結果モーダルウィンドウを表示するかどうかという処理を書いてました。雑ですがご参考まで。

const obs = riot.observable();

this.on('mount', () => {
  hogehogeAPI.checkAccessMethod(params)  //APIやメソッド及び引数は適当です
  .done(function (data){
    if (data === false){
      obs.trigger('showModal');
    }
  }).fail(function (){
    console.error('Error...');
  })
});

obs.on('showModal', function() {
  $('#example').modal('show');
})