業務アプリデモ開発をベースにhifiveを学ぼう（6）「ビューのアップデート」
今回も引き続き業務デモアプリ開発を通じてhifiveを紹介します。今回は表示のアップデートについてです。
hifiveでは主に2パターンの表示更新が利用できます。一つは直接のDOM書き換え、もう一つはEJSを使った方法です。
DOMの書き換え
まずDOMを書き換える方法です。hifiveではjQueryを読み込んでいるので、これは使い慣れた方法でアップデートできるかと思います。
例えばリストの件数をアップデートする場合です。 js/GridViewerController.js の中で次のようなコードがあります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '{rootElement} changeGridDataLengthChange': function(ctx) { | |
| var length = ctx.evArg; | |
| this.$find('.gridDataLength').text(length); | |
| }, |
この this.$findでjQueryが呼び出せます。ちょっとした文字の変更であればこれで対応できます。
EJSを使った方法
hifiveではテンプレートエンジンとしてEJSを採用しています。これを使う場合、まずコントローラでテンプレートを定義します。js/DetailController.jsを参考にすると、詳細画面を表示する際に、
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| this.view.update('{rootElement}', 'purchaseDetail', { | |
| details: details | |
| }); |
と指定します。これはコントローラのルートエレメントに対して、purchaseDetailというテンプレートを適用するという意味になります。テンプレートは template/sample-template.ejs になります。これは js/PageController.js にて定義されています。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var pageController = { | |
| __name: 'sample.PageController', | |
| __templates: 'template/sample-template.ejs', |
そして、このファイルの中で、id=purchaseDetail で定義されている部分がテンプレートになります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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.updateを呼び出すことによって表示を更新できるようになっています。大きな画面の変更であればEJSを使うことで状態の管理などから解放され、HTMLとロジックの分離によるメンテナンス性の維持が臨めるようになるはずです。
hifiveではテンプレートの実装を補助するテンプレートエディタを提供しています。実装しながら、テンプレートの適用結果をすぐに確認することができ、実装の効率化が期待できますので、ぜひ使ってみてください。
画面の表示更新は何かと面倒な処理です。ロジックから分離し、追加開発によっても複雑にならないよう注意しましょう。
今回のコードはGitHubにアップロード されています。また、デモはこちらにて試せます。
hifive – HTML5企業Webシステムのための開発プラットフォーム
hifive開発者ブログ 
コメントは受け付けていません。