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

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

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

概要

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

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>

view raw

index.html

hosted with ❤ by GitHub

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);
	});

view raw

index.js

hosted with ❤ by GitHub

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

	$(function() {
	var controller = {
	__name: 'bController',
	getMessage: function(message) {
	this.$find(".message").text(message);
	}
	}

	h5.core.expose(controller);

	});

view raw

index.js

hosted with ❤ by GitHub

最後にこの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);
	});

view raw

index.js

hosted with ❤ by GitHub

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

view raw

index.js

hosted with ❤ by GitHub

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

	'{rootElement} sendMessage': function(context) {
	let text = context.evArg.text;
	this._buttonController.getMessage(text);
	}

view raw

index.js

hosted with ❤ by GitHub

	getMessage: function(message) {
	this.$find(".message").text(message);
	}

view raw

index.js

hosted with ❤ by GitHub

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

hifive開発者ブログ