データバインド用のHTML記述仕様
ビューHTML（タグ）に特別な属性を付与することで、どのデータをどこにどのようにバインドするかを制御することができます。
以下では、制御用の記述仕様を説明します。
データバインドで使用するタグ属性
data-h5-context
コンテキストを指定（絞込み）します。
この属性で指定するプロパティはオブジェクトでなければいけません。
※配列の各要素を自動的に繰り返して出力したい場合はdata-h5-loop-contextを使用してください。
この属性を指定したタグ以下（そのタグ自身を含む）は、ここで指定されたオブジェクトを新たなコンテキストとします。
data-h5-loop-context
ループコンテキストを指定します。
この属性で指定するプロパティは配列またはObservableArrayでなければいけません。
この属性を指定すると、指定したタグの子要素を自動的に配列の要素数分複製します。
直接の子要素が複数ある場合は、それらすべてを1つの繰り返し単位とし、配列の要素数分複製します。
ObservableArrayの場合、要素の追加・削除があった場合、対応する繰り返し要素が自動的に追加（複製）・削除されます。
また、子要素の各繰り返しのコンテキストはそれぞれ配列の各要素になります。
例1：
ソース：
<li data-h5-bind="address"> <!-- items[i].address を意味する -->
</ul>
出力結果：
<li>Address1
<li>Address2
<li>Address3
</ul>
例2：
ソース：
ID:<span data-h5-bind="id"></span><br> <!-- items[i].id -->
Name:<span data-h5-bind="name"><span> <!-- items[i].name -->
<hr>
</div>
出力結果：
ID:<span>1</span>
Name:<span>Name1</span>
<hr>
ID:<span>2</span>
Name:<span>Name2</span>
<hr>
</div>
空の配列(ObservableArray)、配列/ObservableArray以外(null含む)、または指定無し(itemsをプロパティに含まないオブジェクト)をバインドした場合は、繰り返し要素は表示されません。
view.bind($div, {
items: null
});
// 空配列、またはitemsを指定しない場合も結果は同じ
//
// view.bind($div, {
// items: []
// });
//
// view.bind($div, {});
出力結果：
</div>
data-h5-bind
現在のコンテキストが持つプロパティをバインド（出力）します。
例えば、以下のような構造を持つオブジェクトがコンテキストになっていた場合
id: 1,
name: 'My Name',
address: 'Minatomirai, Yokohama',
tel: '000-1234-5678'
}
data-h5-bindでid, nameなどを指定すると、そのプロパティの値を自動的に出力します。
記述例：
Id:<span data-h5-bind="id"></span><br>
Name:<span data-h5-bind="name"></span>
</div>
1つのタグに対して複数のプロパティをバインドすることも可能です。
その場合は、各指定をセミコロンで区切ってください。
バインドの詳細指定（属性・スタイル等へのバインド）
タグのテキスト以外に、属性やスタイルにプロパティをバインドすることができます。
data-h5-bind属性を以下のように記述してください。
| バインド種別 | 記述方法 | 例 |
|---|---|---|
| 自動 ※1 | （バインド先を省略し、プロパティ名のみ記述） | address |
| タグのテキストノード | text | text:address |
| タグのinnerHTML | html | html:address |
| 属性 | attr(属性名) | attr(href):addressUrl |
| クラス（class）※2 | class | class:addressClass |
| スタイル | style(スタイル名) | style(color):addressColor |
※1：
バインドする要素（タグ）の種類に応じて、以下のようにバインドする。
- inputタグの場合：value属性にバインド
- inputタグ以外：テキストノードとしてバインド
※2：
指定されたプロパティの値を1つのクラスとして追加・削除する。
attr(class):fooと指定した場合はclass属性自体がfooの値になるのに対し、
class:fooとした場合はfooの値を1つのクラスとして追加・削除する。
なお、バインド対象ノードに初めから書かれているクラスは常にそのままである。
バインドする値が初めから書かれていた場合、二重追加はされない。
例：
⇒fooの値がmyClass -> sampleClass -> anotherClass と変化した場合、
classの値は「sampleClass myClass」->「sampleClass」->「sampleClass anotherClass」となる。
初めから書かれている"sampleClass"は、常にノードに付加されたままとなる。
記述例：
<!-- addressDataオブジェクトをコンテキストとして、
- nameを自動バインド(spanタグの場合テキストノードとしてバインド)
- addressHrefをhref属性にバインド
- nameColorをcolorスタイルにバインド
-->
<a data-h5-bind="name; attr(href): addressHref; style(color): nameColor"></a>
</div>