04.データアイテムの更新とイベント
hifiveのデータモデル機構では、各データアイテムへの値の代入時に、事前に定義されたスキーマに従って代入される値が型や制約に違反しないかをチェックします。
また、代入操作を外部から監視する（イベントリスナーをセットする）ことができます。
以下では、データアイテム変更時の挙動と更新時のイベントについて説明します。
データアイテムの更新
データアイテムの値を更新する（Dataitem.set()を呼ぶ）と、以下の処理が行われます。
- 値の暗黙型変換（データモデルの仕様で定められている範囲に限る）
- 値の型・制約チェック
- depend指定されているプロパティの更新
- 変更イベントの発生
データアイテムの更新処理は、createによる既に登録されているアイテムの値の変更、またはset()メソッドの呼び出しで実行されます。
型・制約チェックの動作例：
var item = model.create({
id: '001',
val: 100 // type:'number'指定されているプロパティ
});
// データアイテムitemのvalプロパティの値を123に変更
// 文字列からnumber型への型変換は自動で行われる
item.set('val', '123');
item.get('val') === 123; // true（文字列から数値への値の型変換が行われている）
try {
item.set('val', 'ABC');
} catch (e) {
// type:'number'と指定されている項目に数値変換できない文字列を代入するとエラーが発生
alert('不正な値が代入されました');
}
値の更新イベント概要
データアイテムが更新されると、データアイテム、データモデル、データモデルマネージャからそれぞれイベントが発生し、事前にセットされたイベントリスナーが動作します。
通常は1つのデータアイテムを更新すると即座にイベントが発生しますが、後述するbeginUpdate(), endUpdate()メソッドを使用すると複数の変更を1つのイベントにまとめることができます。
データアイテム changeイベント
データアイテムの値が更新されると、changeイベントが発生します。
データアイテムのaddEventListenerメソッドを使ってchangeイベントにイベントリスナーをセットすると、更新を検知できます。
データアイテムが更新されると、changeイベントのリスナー関数が実行されます。
イベントリスナーの動作例：
id: '001',
val: 1
});
var listener = function(ev){
alert('change!');
};
item.addEventListener('change', listener);
item.set('val',2); // 「change!」を表示
model.create({
id: '001', // 既に存在するIDを指定してcreate()を呼ぶと、当該IDを持つデータアイテムの値が変更される
val: 3
}); // 「change!」を表示
item.set('val', 3); // 同じ値がセットされたので、イベントは発生しない（アラートが出ない）
データモデル itemsChangeイベント
データアイテムの追加、削除、変更が行われると、そのアイテムが属しているデータモデルからitemsChangeイベントが発生します。データアイテムと同様、addEventListenerメソッドでイベントリスナーを登録します。
なお、データアイテムの変更時には、データアイテムのchangeイベントが起きてからデータモデルのitemsChangeイベントが発生します。
var listener = function(ev) {
alert('itemsChange!');
}
model.addEventListener('itemsChange', listener); //modelはDataModelのインスタンス
// データアイテムの生成
var item = model.create({
id: '001',
val: 1
}); // 「itemsChange!」を表示
// item.valの値の変更
item.set('val', 2); // 「itemsChange!」を表示
// itemにイベントハンドラを追加
item.addEventListener('change', function(ev) {
alert('change!');
});
item.set('val', 3); // 「change!」 → 「itemsChange!」の順に表示
// itemの削除
model.remove('001'); // 「itemsChange!」を表示
データモデルマネージャ itemsChangeイベント
データモデルマネージャが管理するデータモデルのいずれかでitemsChangeイベントが発生すると、その後に、データモデルマネージャのitemsChangeイベントが発生します。つまり、
データアイテムのchangeイベント ⇒ データモデルのitemsChangeイベント ⇒ データモデルマネージャのitemsChangeイベント
の順でイベントが発生します。
データアイテムやデータモデルと同様、addEventListenerでイベントリスナーを登録します。
// 引数はデータモデルマネージャのitemsChangeイベントオブジェクト
// this は当該データモデルマネージャ
}
manager.addEventListener('itemsChange', listener);
以上で、データモデルのチュートリアルは終了です。
hifiveでは、データモデルの変更検知機構を利用して、データの変更を自動的に画面に反映させる「データバインド機構」も用意されています。
次のチュートリアルでは、このデータバインド機構について学びます。
次のステップ ⇒ チュートリアル（データバインド編）