hifiveのコントローラを連携させてみよう

大きなシステムが機能やサービスごとに分割して開発されるように、フロントエンドにおいても一つのコントローラですべてを管理するのではなく、複数のコントローラに分けて実装する方が効率的です。

今回はhifiveで複数のコントローラを分ける実装方法について紹介します。

実装例はJSFiddleにあります。参考にしてください。

概要

まず大事なのは全体を統括するコントローラの存在です。その中に個々の機能を実装するコントローラが複数存在します。つまり全体を統括するコントローラは機能実装はせず、コントローラ同士をつなぐ役割に徹するのが良いでしょう。

HTMLについて

HTMLは次のようになります。全体として #container があり、その中に子コントローラ用の #container1 、 #container2 があります。

JavaScriptについて

JavaScriptの実装ですが、まず子コントローラを定義します。まずテキストが入力されたタイミングでイベントハンドリングを行うコントローラです。

次に親コントローラから送られてきたメッセージを表示するコントローラです。

最後にこの2つのコントローラをつなぐ親コントローラです。大事なのは __meta の中で子コントローラごとにrootElementとして監視するDOMを指定しておくことです。

実際の処理のハンドリングについては以下のように、まず子コントローラからトリガーを使って親コントローラへ通知します。

親コントローラでは {rootElement} という定義を使って受け取ります。こちらでは子コントローラのメソッドを直接呼び出します。

そして子コントローラで表示処理を行います。

このように実装することでDOMごとにコントローラを分けて権限を管理しつつ、相互にメッセージのやり取りができるようになります。ごく小さなWebアプリケーションであれば一つのコントローラで良いですが、ある程度大きくなるのが予想される場合はあらかじめコントローラ連携を念頭に作るのが良いでしょう。

詳細は13.コントローラの連携 – hifiveを参照してください。