02.データバインドの基本的な使い方
データのバインド
データのバインドは、まずバインドされるHTMLを作成し、そのHTMLを子に持つ要素に対してオブジェクトをバインドします。
<h1 data-h5-bind="title"></h1>
<div data-h5-context="item">
ID: <span data-h5-bind="id"></span>
Name: <span data-h5-bind="name"></span>
</div>
</div>
上のようなHTMLに対して、Viewクラスのbind()メソッドを使ってオブジェクトをバインドします。
// 第2引数にバインドするオブジェクト
h5.core.view.bind('#bindtest', {
title: 'データバインドテスト', // data-h5-bind="title" の要素にバインドされる
// data-h5-context="item" の要素内で、使用するオブジェクトの指定
item: {
id: '0001', // data-h5-context="item" 要素の子要素でdata-h5-bind="id"の要素にバインド
name: 'taro' // ↑と同様
}
});
<div id="bindtest">
<h1>データバインドテスト</h1>
<div>
ID: <span>0001</span>
Name: <span>taro</span>
</div>
</div>
上記のように、data-h5-bind属性にオブジェクトのプロパティ名を指定することで、オブジェクトをHTMLにバインドにすることができます。
入れ子になったオブジェクトは、data-h5-context属性によって絞込むことができます。また、子要素のdata-h5-bindで入れ子になったオブジェクトのプロパティ名を指定してバインドすることができます。
さらに入れ子になっている場合も同様です。オブジェクトの入れ子関係に対応するように、data-h5-content属性を持つDOMの親子関係を記述します。
title: 'データバインドテスト',
parentItem: {
childItem: {
grandChildItem: {
name: 'GrandChild'
},
name: 'Child'
},
childItem2: {
name: 'Child2'
}
name: 'Parent'
}
});
<h1 data-h5-bind="title"></h1>
<div data-h5-context="parentItem">
Name:<span data-h5-bind="name"></span> <!-- Parent -->
<div data-h5-context="childItem">
Name:<span data-h5-bind="name"></span> <!-- Child -->
<div data-h5-context="grandChildItem">
Name:<span data-h5-bind="name"></span> <!-- GrandChild -->
</div>
</div>
<div data-h5-context="childItem2">
Name:<span data-h5-bind="name"></span> <!-- Child2 -->
</div>
</div>
</div>
データバインド用のHTML記述仕様についての詳細はリファレンス（仕様詳細）» データバインド用のHTML記述仕様をご覧ください。
データアイテムのバインド
先ほどの例のitemに指定したオブジェクトの代わりに、データアイテムを指定することもできます。
// idとnameを持つモデルの作成
var model = manager.createModel({
name: 'NameModel',
schema: {
id: {
id: true
},
name: {
type: 'string'
}
}
});
// id: 002, name: jiro のアイテムを作成
var item = model.create({
id: '002',
name: 'jiro'
});
// viewにバインド
h5.core.view.bind('#bindtest', {
title: 'データバインドテスト',
// データアイテムを指定
item: item
});
HTML部分は先ほどと変わりません。
<div id="bindtest">
<h1>データバインドテスト</h1>
<div>
ID: <span>0002</span>
Name: <span>jiro</span>
</div>
</div>
データアイテムをバインドした場合は、そのデータアイテムが持つプロパティ名をdata-h5-bindに指定します。オブジェクトをバインドする場合とほぼ同様に扱うことができます。
データアイテムの値変更
データアイテムをバインドし、そのデータアイテムの値に変更があった場合、変更されたプロパティをバインドしている要素について自動で書き換えが行われます。
先ほどの例の、itemのnameの値を以下のように変更します。
すると即座にビューに反映されます。
<h1>データバインドテスト</h1>
<div>
ID: <span>0002</span>
Name: <span>sabrow</span>
</div>
</div>
注意：データバインドの多重使用について
なお、値の読み取りは通常通りjQuery等を使用してかまいません。
また、親子関係にない複数の要素に同時にデータバインドを使用することは可能です。
例
以下のようなHTMLでdiv#bindTargetの要素にデータバインドを適用した場合、
div#bindTarget、およびその子孫要素のdiv#childやdiv#grandChildに対して
多重にデータバインドを適用してはいけない。
一方、div#anotherはdiv#bindTargetとは兄弟である（親子関係にない）ので
div#anotherとdiv#bindTargetで同時に（別の）データバインドを使用することは可能。
<div id="bindTarget"> <!-- この要素をルートとしてデータバインドを適用 -->
<div id="child">
<div id="grandChild">
</div>
</div>
</div>
<div id="another">
</div>
</body>
次の章では、配列・ObservableArrayのバインドについて説明します。
次のステップ ⇒ 配列・ObservableArrayのバインド