Riot.jsでobservableなイベントハンドリングが複数回動作してしまう

Riot.jsでobservableなイベントハンドリングが複数回動作してしまう

上記のようなページが出るので、Chromeの開発者ツール等でconsole.log の様子を見てみましょう。

Riot.jsでobservableなイベントハンドリングが複数回動作してしまう

mountと同時にHumanStore.startLifeが実行されるのでこのようにログ出力されます。

さて、page2に切り替えて、もう一度page1に戻してみましょう。

Riot.jsでobservableなイベントハンドリングが複数回動作してしまう

なんだか2回ずつログが記録されていますね。
page1,page2を何度も何度も切り替えるとログ出力される回数がどんどん増えていきます。

なぜこうなるのか

冒頭に述べたとおり、

Riot.jsの <script>...</script>はマウントされるたびに動く

からなんですね。
マウントされるたびに ob.listenがcallされるので、イベントハンドラコールバックが複数登録されてしまうためです。

どうしたら良いのか

今のところunmount時にイベントハンドラコールバックの登録を解除することしか思いつきません。

this.on("unmount", ()=>{
  ob.remove(HumanEvent.Born);
  ob.remove(HumanEvent.Living);
  ob.remove(HumanEvent.Dead);
});
カテゴリ:Default 時間:2017-07-10 人気:0
この記事では、 Node.js riot.js obseriot

関連記事

Copyright (C) socapnw.com, All Rights Reserved.

Socapnw All Rights Reserved.

processed in 4.277 (s). 9 q(s)