データ：概要

Wijmoは、強力で使いやすいデータレイヤに基づいた堅固なインフラストラクチャを採用しています。メインのデータ連結インタフェースはICollectionViewですが、Wijmoには編集やページングをサポートするIEditableCollectionViewとIPagedCollectionViewの各インタフェースも用意されています。

ICollectionView

WijmoのICollectionViewインタフェースは、MicrosoftのXAMLプラットフォームで使用されているICollectionViewインタフェースのJavaScriptバージョンです。これは、事実上.NETのインタフェースと同じです。このインタフェースにより、強力で一貫性があるMVVMフレンドリな方法で、データをUI要素に連結できます。また、カレンシー、フィルタ処理、グループ化、ソートの各サービスも提供されます。

IEditableCollectionViewインタフェースとIPagedCollectionViewインタフェースは、編集とページングをサポートしています。

Wijmoには、ICollectionViewを実装するクラスがいくつか用意されています。最も基本的なクラスはCollectionViewです。これは、標準JavaScript配列をデータソースとして使用します。また、BreezeJSやODataをデータソースとして使用する実装も用意されています。

CollectionViewクラス

CollectionvViewクラスはICollectionViewインタフェースから派生しています。このクラスには、Wijmoが提供するUIコントロールでデータ管理を簡単に行うための一連の機能が含まれています。コントロールに連結すると、CollectionViewに加えた変更がコントロールに自動的に反映されます。CollectionViewの使用方法については、次のトピックを参照してください。

ObservableArray

ObservableArrayクラスも、Wijmoで使用できる一般的なデータ管理クラスです。ObservableArrayの使用方法は、標準JavaScript配列の使用方法とよく似ています。また、insert、remove、sort、spliceなどの似た関数もあります。

collectionChangedイベント

コレクションで項目を変更すると、ObservableArrayクラスによってcollectionChangedイベントが発生します。このイベントは、次のメソッドが使用されると発生します。

• push
• pop
• splice
• insert
• remove

このイベントを使用するには、ハンドラを追加し、イベントが発生したときの動作を定義する関数をハンドラに引数として提供します。次の例は、ハンドラをイベントに追加する方法を示しています。

例

import * as wijmo from '@mescius/wijmo';

let observableArray = new wijmo.ObservableArray();

observableArray.collectionChanged.addHandler( (host, event) => {
    console.log('collectionChanged');
});

配列メンバや配列の長さに値を直接割り当てて変更しても、collectionChangedイベントは発生しません。