業務アプリデモ開発をベースにhifiveを学ぼう（6）「ビューのアップデート」

by moongift : 2016/05/19

今回も引き続き業務デモアプリ開発を通じてhifiveを紹介します。今回は表示のアップデートについてです。

hifiveでは主に2パターンの表示更新が利用できます。一つは直接のDOM書き換え、もう一つはEJSを使った方法です。

DOMの書き換え

まずDOMを書き換える方法です。hifiveではjQueryを読み込んでいるので、これは使い慣れた方法でアップデートできるかと思います。

例えばリストの件数をアップデートする場合です。 js/GridViewerController.js の中で次のようなコードがあります。

	'{rootElement} changeGridDataLengthChange': function(ctx) {
	var length = ctx.evArg;
	this.$find('.gridDataLength').text(length);
	},

この this.$findでjQueryが呼び出せます。ちょっとした文字の変更であればこれで対応できます。

hifiveではテンプレートエンジンとしてEJSを採用しています。これを使う場合、まずコントローラでテンプレートを定義します。js/DetailController.jsを参考にすると、詳細画面を表示する際に、

	this.view.update('{rootElement}', 'purchaseDetail', {
	details: details
	});

view raw

update.js

hosted with ❤ by GitHub

と指定します。これはコントローラのルートエレメントに対して、purchaseDetailというテンプレートを適用するという意味になります。テンプレートは template/sample-template.ejs になります。これは js/PageController.js にて定義されています。

	var pageController = {
	__name: 'sample.PageController',
	__templates: 'template/sample-template.ejs',

view raw

pageController.js

hosted with ❤ by GitHub

そして、このファイルの中で、id=purchaseDetail で定義されている部分がテンプレートになります。

	<script type="text/ejs" id="purchaseDetail">
	<div class="detailScroll">
	[%
	var notApprovedIds = [];
	for(var i = 0, l = details.length; i < l; i++){
	var detail = details[i];
	if(detail.status !== 'approved') { notApprovedIds.push(detail.id);}
	%]
	:
	</div>
	</script>

view raw

purchaseDetail.html

hosted with ❤ by GitHub

view.updateを呼び出すことによって表示を更新できるようになっています。大きな画面の変更であればEJSを使うことで状態の管理などから解放され、HTMLとロジックの分離によるメンテナンス性の維持が臨めるようになるはずです。

hifiveではテンプレートの実装を補助するテンプレートエディタを提供しています。実装しながら、テンプレートの適用結果をすぐに確認することができ、実装の効率化が期待できますので、ぜひ使ってみてください。

画面の表示更新は何かと面倒な処理です。ロジックから分離し、追加開発によっても複雑にならないよう注意しましょう。

今回のコードはGitHubにアップロードされています。また、デモはこちらにて試せます。

コメントは受け付けていません。