03.配列・ObservableArrayのバインド
Last modified by masaru-yokoyama on 2013/07/11, 21:28
データバインドチュートリアル目次
ループバインドによるビューの自動繰り返し出力
データバインド機構では、特定の要素を自動的に繰り返し出力させることができます。
データソースとして通常の配列、またはObservableArrayを用いることができ、
配列に含まれる要素の数だけビューが繰り返し出力されます。
また、ObservableArrayをソースにした場合、push(), splice()などのメソッド呼び出しで
配列の要素数が変更されると、ビューも自動的に変更されます。
繰り返し出力を使用する場合は、繰り返し部分の親要素にdata-h5-loop-context属性を指定します。
data-h5-loop-contextが指定された要素の子要素が、配列の要素の数だけ複製されます。
子要素には、data-h5-bind属性で配列要素中のどのプロパティ値をバインドするかをさらに指定できます。
また、data-h5-loop-context属性の値には、現在のコンテキストにおける繰り返しプロパティを指定します。
通常の配列をバインドする場合
<div id="bindtest">
<div data-h5-loop-context="items">
<div>
ID: <span data-h5-bind="id"></span> <!-- items[i].id を意味する -->
Name: <span data-h5-bind="name"></span> <!-- items[i].name を意味する -->
</div>
</div>
</div>
<div data-h5-loop-context="items">
<div>
ID: <span data-h5-bind="id"></span> <!-- items[i].id を意味する -->
Name: <span data-h5-bind="name"></span> <!-- items[i].name を意味する -->
</div>
</div>
</div>
var ary = [{
id: '001',
name: 'taro'
}, {
id: '002',
name: 'jiro'
}];
h5.core.view.bind($('#bindtest'), {
items: ary
});
id: '001',
name: 'taro'
}, {
id: '002',
name: 'jiro'
}];
h5.core.view.bind($('#bindtest'), {
items: ary
});
出力結果は以下のようになります。
ID: 001 Name: taro
ID: 002 Name: jiro
ID: 002 Name: jiro
ObservableArrayのバインド
配列の場合と同様にバインドすることができます。
// ObservableArrayの作成
var obsAry = h5.core.data.createObservableArray();
obsAry.set(0, { id: '001', name: 'taro' });
obsAry.set(1, { id: '002', name: 'jiro' });
h5.core.view.bind($('#bindtest'), {
items: obsAry
});
var obsAry = h5.core.data.createObservableArray();
obsAry.set(0, { id: '001', name: 'taro' });
obsAry.set(1, { id: '002', name: 'jiro' });
h5.core.view.bind($('#bindtest'), {
items: obsAry
});
HTML、出力結果は配列の場合と同様です。
また、ObservableArrayを使った場合、配列への変更は自動的にビューに反映されます。
obsAry.push({
id: '005',
name: 'goro'
});
id: '005',
name: 'goro'
});
出力結果
ID: 001 Name: taro
ID: 002 Name: jiro
ID: 005 Name: goro
ID: 002 Name: jiro
ID: 005 Name: goro
次の章からは、データモデル・データバインドを使ってサンプルアプリを作っていきましょう。
次のステップ ⇒ サンプルアプリ概要
参照
- リファレンス/ObservableArray[ver.1.1]