Skip to content
Tags

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

by : 2016/05/19

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

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

DOMの書き換え

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

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

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

EJSを使った方法

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

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

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

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

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


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

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

hifive – HTML5企業Webシステムのための開発プラットフォーム

banner_02

From → hifive, HTML5

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

%d人のブロガーが「いいね」をつけました。