データバインドの動作
基本的な動作
概念
TBD
バインディングの開始
データバインドを開始するには、Viewが持つbind()関数を呼び出します。
- bind
- 引数で指定した要素をルートとして、同じく指定されたコンテキストをバインドする
※テンプレートを文字列で取得するget()やappend()などでは、データバインドは開始されません。
get()で取得した文字列をDOMツリーに追加した後bind()を呼んでください。
bind()に渡すデータオブジェクト、つまりバインドの対象となるデータオブジェクトを「コンテキスト」と呼び、
その内容はビューHTMLに記述された指示に従って自動的に出力されます。
（以下、バインドを開始する関数としてbind()を代表に用います。）
特に、bind()の引数として渡したコンテキストはルートコンテキストと呼びます。
プロパティ値の出力
コンテキスト中の特定のプロパティを実際にタグにバインドする（出力する）ためにはdata-h5-bind属性を使用します。
bind(target, context)で指定されたビューのルートコンテキストはcontext自身になります。
後ろで説明するように、コンテキストはdata-h5-context属性によって"絞り込み"を行うことができますが、
data-h5-context属性がいずれの親要素にも登場していない状態でdata-h5-bind属性を記述すると、
ルートコンテキストが持つプロパティをバインドすることができます。
例：
<span data-h5-bind="name"></span> <!-- addressData.nameの値がspanタグの中身として出力される -->
</div>
コンテキスト
コンテキストとして設定可能なオブジェクト
コンテキストはdata-h5-context属性またはdata-h5-loop-context属性で指定し、
この属性が書かれた要素の子(子孫)要素は、同じコンテキストオブジェクトを共有します。
詳細は「コンテキストの決定と絞り込み」の章を参照してください。
data-h5-contextに指定できるのはオブジェクト（DataItem, ObservableItemを含む）のみ、data-h5-loop-contextに指定できるのは配列（ObservableArrayを含む）のみです。
ループコンテキスト（data-h5-loop-context）として配列を指定すると、その各要素を自動的に繰り返して出力することができます。
繰り返し出力を行う場合はdata-h5-loop-context属性を使用してコンテキスト（配列オブジェクト）を指定します。
（data-h5-loop-context属性を指定した場合、ループして作られるのはその子要素です。
loop-contextを指定した要素自身は繰り返されないので注意してください。）
指定されたコンテキストがObservableArrayの場合、そのObservableArrayが変更されると
繰り返しによって作られたビューも自動的に追加・削除されます。
変更検知・ビューの自動更新
データバインドの大きな特長は、バインドが継続している限り、
コンテキスト内のオブジェクトが変更されるとその変更が自動的に画面に反映されることです。
ただし、変更を自動的に画面に反映させるためには、
コンテキストに含まれるオブジェクトが変更検知に対応している必要があります。
コンテキストに指定したオブジェクトの種類と変更検知の可否は以下の通りです。
| コンテキストに指定したオブジェクトの種類 | 変更検知・ビューの自動更新 |
|---|---|
| データアイテム、ObservableItem | ○ |
| ObservableArray | ○ |
| 一般のオブジェクトおよび配列 | × |
変更検知に対応していないオブジェクトの場合、画面の自動更新は行われません。
データアイテムまたはObservableItemが持つオブジェクトをコンテキストとして指定しており、
そのオブジェクトインスタンス自体が変わった場合、
既存のビューを破棄して新しいオブジェクトに基づいてビューを作り直します。
例：
observableItem.set('plainObject', anotherObject) のように別の(非Obseravableな)オブジェクトを
セットした場合、div#sampleのdivノードは一旦破棄され、新たにビューが作り直されてバインドが再実行される。
plainObjectは非Observableなので、plainObject.data = 'foo' のように値を変更しても自動反映されない。 -->
<div data-h5-context="observableItem">
<div id="sample" data-h5-context="plainObject">
<span data-h5-bind="data"></span>
</div>
</div>
データアイテムやObservableArrayが与えられると、データバインド機構は
自動的にそれらの変更検知を開始します（各オブジェクトにイベントハンドラをセットします）。
そして、変更が実際に検知されると、定義に基づいて自動的にビューを更新します。
ただし、データモデルマネージャでbeginUpdate()/endUpdate()を使用してアップデートセッションが管理されている場合、データモデルマネージャ下のデータアイテムやそのデータアイテムに属しているObservableArrayの変更がビューに反映されるタイミングは、マネージャのアップデートセッションに依存します。つまり、マネージャのendUpdate()のタイミングでビューへの反映が行われます。
コンテキストの絞り込み
タグの構造に対応させて、コンテキストを絞り込むことができます。
あるタグを起点に絞り込みを行うと、そのタグの子要素のコンテキストはそれ（絞り込まれたオブジェクト）になります。
絞り込むには、data-h5-context, data-h5-loop-context属性を指定します。
data-h5-context属性（を記述した要素）をネストさせた場合、
ある要素が属するコンテキストはdata-h5-(loop-)context属性を持つ最も近い親のコンテキストになります。
例：
<div data-h5-context="childContext">
<span data-h5-bind="data"></span> <!-- このspanタグのコンテキストはchildContext -->
</div>
</div>
記述の文法についてはデータバインド用のHTML記述仕様を参照してください。
値がnullの場合の挙動
data-h5-contextで指定するオブジェクトがnullの場合
当該要素以下すべての要素に対するデータバインドを解除します。
data-h5-bind属性が指定されている要素は初期化（※）されます。
コンテキストの指定がネストしている場合、それらの各コンテキストに対しても
nullをセットしたのと同様の動作を行い、データバインドを解除します。
※「初期化」は、data-h5-bindのプロパティ値にnullを渡した場合と同じ動作になります。
詳細は次のセクションを参照してください。
data-h5-loop-contextで指定する配列がnullの場合
全ての子要素を削除します。
（子要素のデータバインドも解除されます。）
data-h5-loop-contextが書かれた要素自身は削除しません。
data-h5-bindで指定したプロパティの値がnullの場合
| バインド種別 | 動作 |
|---|---|
| 自動, タグのテキストノード(text), タグのinnerHTML(html) | 空文字をセットします。 |
| 属性(attr) | 当該属性を削除します。 |
| クラス(class) | バインド開始時に設定されていた値に戻します。 |
| スタイル(style) | 当該スタイル指定を削除します。 |
ビュー（HTML）の記述
制約
-