hifiveのコントローラを連携させてみよう
大きなシステムが機能やサービスごとに分割して開発されるように、フロントエンドにおいても一つのコントローラですべてを管理するのではなく、複数のコントローラに分けて実装する方が効率的です。
今回はhifiveで複数のコントローラを分ける実装方法について紹介します。
実装例はJSFiddleにあります。参考にしてください。
概要
まず大事なのは全体を統括するコントローラの存在です。その中に個々の機能を実装するコントローラが複数存在します。つまり全体を統括するコントローラは機能実装はせず、コントローラ同士をつなぐ役割に徹するのが良いでしょう。
HTMLについて
HTMLは次のようになります。全体として #container があり、その中に子コントローラ用の #container1 、 #container2 があります。
| <div id="container"> | |
| <div id="container1"> | |
| <input type="text" id="text" /> | |
| </div> | |
| <div id="container2"> | |
| <p class="message">ここにメッセージがきます | |
| </p> | |
| </div> | |
| </div> |
JavaScriptについて
JavaScriptの実装ですが、まず子コントローラを定義します。まずテキストが入力されたタイミングでイベントハンドリングを行うコントローラです。
| $(function() { | |
| var controller = { | |
| __name: 'aController', | |
| '#text keyup': function(cotnext, $el) { | |
| let text = this.$find("#text").val(); | |
| this.trigger('sendMessage', { | |
| text: text | |
| }) | |
| } | |
| } | |
| h5.core.expose(controller); | |
| }); |
次に親コントローラから送られてきたメッセージを表示するコントローラです。
| $(function() { | |
| var controller = { | |
| __name: 'bController', | |
| getMessage: function(message) { | |
| this.$find(".message").text(message); | |
| } | |
| } | |
| h5.core.expose(controller); | |
| }); |
最後にこの2つのコントローラをつなぐ親コントローラです。大事なのは __meta の中で子コントローラごとにrootElementとして監視するDOMを指定しておくことです。
| $(function() { | |
| var controller = { | |
| __name: 'parrentController', | |
| _sendController: aController, | |
| _buttonController: bController, | |
| __meta: { | |
| _sendController: { | |
| rootElement: '#container1' | |
| }, | |
| _buttonController: { | |
| rootElement: '#container2' | |
| } | |
| }, | |
| __ready: function() { | |
| }, | |
| '{rootElement} sendMessage': function(context) { | |
| let text = context.evArg.text; | |
| this._buttonController.getMessage(text); | |
| } | |
| } | |
| h5.core.controller('#container', controller); | |
| }); |
実際の処理のハンドリングについては以下のように、まず子コントローラからトリガーを使って親コントローラへ通知します。
| this.trigger('sendMessage', { | |
| text: text | |
| }) |
親コントローラでは {rootElement} という定義を使って受け取ります。こちらでは子コントローラのメソッドを直接呼び出します。
| '{rootElement} sendMessage': function(context) { | |
| let text = context.evArg.text; | |
| this._buttonController.getMessage(text); | |
| } |
そして子コントローラで表示処理を行います。
| getMessage: function(message) { | |
| this.$find(".message").text(message); | |
| } |
このように実装することでDOMごとにコントローラを分けて権限を管理しつつ、相互にメッセージのやり取りができるようになります。ごく小さなWebアプリケーションであれば一つのコントローラで良いですが、ある程度大きくなるのが予想される場合はあらかじめコントローラ連携を念頭に作るのが良いでしょう。
詳細は13.コントローラの連携 – hifiveを参照してください。
コメントは受け付けていません。