利用可能なテンプレートの検索
hifiveでは、ビューの生成にテンプレートエンジンを使用できます。
ここでは、テンプレートがどのように発見されるかを説明します。
基本的な考え方
ビューテンプレートは、Viewオブジェクトが保持しています。
コントローラは、それぞれ1つずつViewオブジェクトを保持しています。
テンプレートは、それが要求されたタイミングで、コントローラの親子関係に従い、自分のView⇒親のView⇒その親のView…のように再帰的に検索されます。
最上位にはグローバルViewオブジェクトが存在しており、親子関係の最上位のコントローラまでたどっても当該IDのテンプレートが見つからなかった場合は、グローバルViewオブジェクトが検索されます。
例:コントローラA - 子コントローラB - 孫コントローラC という構造の場合
Bでthis.view.append('#resultList', 'searchResultTmpl')のようにしてテンプレートを使用すると、以下の順序でsearchResultTmplというIDのテンプレートが検索されます。
- BのView
- AのView
- グローバルView
(注:CはBの"子"なので、CのViewは検索対象にはならない)
グローバルViewオブジェクト(h5.core.view)を直接使用する場合
コントローラを経由せず、直接グローバルViewを操作することも可能です。
(h5.core.view.append() のようにして呼び出すことが可能)
この場合、コントローラの親子関係は存在しないので、グローバルViewオブジェクトに登録されているテンプレートのみが検索対象になります。
グローバルViewオブジェクトはテンプレート検索時に常に検索対象になるので、
「複数の画面で使用する共通部品を作成しているが、画面ごとに具体的な表示の仕方(=テンプレートの内容)は変えたい」という場合には、その共通部品が使用するIDのテンプレートをこのグローバルViewに登録する、という方法があります。
グローバルViewにテンプレートを登録するには、load()メソッド、register()メソッドを使う方法の他、後述の通りHTMLに直接テンプレートを記述する方法があります。
画面(HTML)に直接記述されたテンプレートの自動登録
hifiveが読み込まれ、画面のロードが完了(DOMContentLoaded相当のタイミング)すると、
HTMLに記述されたテンプレートは自動的にグローバルViewに登録されます。
従って、HTMLに記述されたテンプレートは、その画面で動作している全てのコントローラで利用可能です。