データのバインド (HTML)

目的

データ バインディングにより、アプリの要素をさまざまなデータ ソース (データベース、ファイル、内部オブジェクトなど) と同期することができます。

このセクションの内容

トピック	説明
クイック スタート: データとスタイルのバインド	JavaScript 用 Windows ライブラリのバインドを使って、データとスタイルを HTML 要素にバインドできます。既定では、WinJS のバインドは一方向です。つまり、データとスタイルの値が変更されると HTML 要素が更新されますが、HTML 要素が変更されてもデータは更新されません。このクイックスタートでは、データだけを含む単純なオブジェクトへの宣言型のバインドについて説明します。これは最も基本的な種類のバインドです。高度な種類のバインドについては、「複合オブジェクトをバインドする方法」と「テンプレートを使ってデータをバインドする方法」をご覧ください。
複合オブジェクトをバインドする方法	アプリを複雑なオブジェクト、特にアプリの UI で制御されないプロセスを管理するオブジェクトなどにバインドしたいことは、よくあります。 このトピックでは、名前と色を含むオブジェクトのデータを表示するアプリの記述方法を示します。これは、基本的には「クイックスタート: データとスタイルのバインド」と同じです。ここでは、変更をトリガーするボタンに応答するのではなく、オブジェクトで変更プロセス自体を管理します。
テンプレートを使ってデータをバインドする方法	データの複数のインスタンスを書式設定して表示する場合は、JavaScript 用 Windows ライブラリのテンプレートを使うと便利です。これらのテンプレートを ListView オブジェクトや FlipView オブジェクトと共に使って、オブジェクトを表示する方法を指定できます。また、テンプレートを使うことで、定義済みのビューを使わずにデータ オブジェクトの複数のインスタンスをバインドすることもできます。 ListView とテンプレートの使用について詳しくは、「クイック スタート: ListView の追加」をご覧ください。FlipView とテンプレートの使用について詳しくは、「FlipView コントロールの追加」をご覧ください。次の手順は、配列でのテンプレートの使い方を示しています。 宣言を使ってテンプレートを WinJS のコントロールとして定義し、内部構造とスタイルを指定できます。テンプレートは、DIV 要素として宣言されている場合でも、DOM の一部として処理されないので、返される DOM の検索結果には含まれません。テンプレートが表示される DIV 要素を指定することも、render メソッドが独自の DIV 要素を作るようにすることもできます。 ここでは、テンプレートを使ってバインド可能な可変数のデータ オブジェクトを DIV 要素にバインドする方法について説明します。ユーザーは、ドロップダウン リストから項目を選んで、表示するオブジェクトの数を選びます。

 

対象となる開発者

このセクションは、JavaScript を使った Windows ランタイム アプリの開発者が、アプリでさまざまな種類のデータを表示する場合に使うように設計されています。