スナップショット：概要

Wijmoの Snapshot クラスは CollectionView クラスを拡張して、Firebaseのコレクションとクエリをリアルタイムでサポートします。 Snapshot クラスをFirestoreWebクライアントライブラリと組み合わせて使用すると、リアルタイムの更新を提供し、Firestoreデータベース内に高度な機能を実装できます。

スナップショットの作成

まず、Snapshotクラスをロードする必要があります。

import { Snapshot } from '@mescius/wijmo.cloud';

Snapshot クラスがロードされたので、次のように Snapshot オブジェクトを作成して使用できます。

// initialize Firestore web client library
const firebaseConfig = {
    apiKey: …
    authDomain: …,
};
firebase.initializeApp(firebaseConfig);

// get a snapshot of the "restaurants" collection
const db = firebase.firestore();
let restaurants = db.collection('restaurants');
let snapshot = new Snapshot(restaurants, {
    query: restaurants.where('type', 'in', ['Japanese', 'Italian' ])
});

// bind the snapshot to a FlexGrid
new FlexGrid('#theGrid', {
    itemsSource: snapshot
});

まず、Webクライアントライブラリを初期化し、次に要求されたデータに基づいてスナップショットを作成します。ここでは、「restaurants」コレクションを使用して、タイプが「Japanese」または「Italian」のスナップショットを作成しています。

query プロパティはいつでも変更できますが、常にスナップショットが初期化されるコレクション（この場合は「restaurants」コレクション）に基づいている必要があります。

最後に、コードはFlexGridのデータソースとして Snapshot を使用します。これで、ユーザーがFlexGridの値を更新するたびに、現在別のブラウザーでそのデータを表示している他のユーザーは、FlexGridが新しい値で更新されます。

スナップショット：概要
スナップショットの作成