データのバインディングと構成オプション

ビューは、データ・バインディングと構成オプションに関連付けることができます。 ビュー・コンテキストがこのデータへのアクセスを提供します。 バインディング・データと構成オプションにアクセスするには、JavaScript の get 関数と set 関数を使用する必要があります。 JavaScript のドット表記は使用できません。

context.binding

バインディング・オブジェクトは、定義されている場合に、ビューにバインドされたデータへのアクセスを提供します。 各ビューに宣言されるデータ・バインディングは多くても 1 つです。

ビューにバインドされたデータにアクセスするには、構文 this.context.binding.get("value") を使用します。value は、データ・バインディングを返す特殊なプロパティー名です。 例えば、ビューが local.phoneBook.title にバインドされている場合、そのビューは以下のように電話帳のタイトルを取得できます。


if (!! this.context.binding){
var title = this.context.binding.get("value")
}
ビューをデータにバインドする主な理由は、バインドされたデータが変更された場合にビューが通知を受けられるようにするためです。 ビュー・フレームワークは、バインドされたオブジェクトにおけるデータの変更を検出し、change イベント・ハンドラー関数を呼び出して自動的にビューに通知します。 これらの通知がビューに送信されるのはバインディング・オブジェクト自体が変更された場合に限られ、そのプロパティーやサブプロパティーが変更された場合には通知されないことに注意してください。 以下のセクションでは、さまざまなデータ型についてと、データの変更通知をビューで受信するために追加のコードが必要になる場合について説明します。

単純データ型および複合データ型へのバインディング

ストリングや数値などの単純データ型の場合、ビュー・フレームワークはデータの変更を検出すると、その変更内容を自動的にビューに通知します。 例えば、ビューが単純ストリング型 local.phoneBook.title にバインドされている場合、タイトルが変更されたこととその新しい値を指定するこのビューの change() 関数が変更イベントで呼び出されます。 local.phoneBook.title にバインドされたすべてのビューが通知を受けます。

ビジネス・オブジェクトのような複合データ型の場合、ビューが通知を受けるのはバインディング・オブジェクト自体が変更された場合に限られ、そのプロパティーやサブプロパティーが変更された場合には通知を受けません。 例えば、ストリングのような単純型ではなく、複合オブジェクト local.phoneBook にビューがバインドされているとします。 オブジェクト phoneBook は複数のプロパティーを持ち、その 1 つが title です。 この場合、title プロパティーが変更されても、change 関数は呼び出されません。これは、ビューが title プロパティーではなく phoneBook オブジェクトにバインドされているためです。 change 関数は、phoneBook オブジェクト全体が変更された場合のみ呼び出されます。 複合オブジェクトのプロパティーが変更されたかどうかをビューで認識する必要がある場合は、bind() 関数または bindAll() 関数を使用して、ビューをプロパティーに手動でバインドする必要があります。 構成オプションについても同じように、bind() 関数と bindAll() 関数を使用できることに注意してください。
重要: bindAll() 関数はオブジェクト・ツリー内の 1 つの深さのレベルのみを処理するため、オブジェクトに複数のレベル (ネストされたオブジェクト) がある場合、ビューはオブジェクト・レベルごとに bindAll() の複数の時間を呼び出す必要があります。
bind(path, callback, [scope])
指定されたプロパティーが変更された場合に、callback 経由でビューに通知します。 scope はオプションのパラメーターで、callback のコンテキスト・スコープを指定します。 callback にハンドルを返します。
bindAll(callback, [scope])
オブジェクトの任意のプロパティーが変更された場合に、callback 経由でビューに通知します。 scope はオプションのパラメーターで、callback のコンテキスト・スコープを指定します。 callback にハンドルを返します。

コールバック・シグニチャーについては、「 関数 (イベント) 」トピックを参照してください。

以下の例では、複合オブジェクトのプロパティーを手動でバインドするためにビューの load イベント・ハンドラーに追加する可能性のあるコードを示します。
   var binding = this.context.binding.get("value");  //this is a complex object
   this.property2Handle = binding.bind("property1.property2", function(e) {some code}, this);
   this.property3Handle = binding.get("property3").bindAll(this.myBindAllChangeHandler, this);
   ......
   this.mybindAllChangeHandler(event) { .....};
この例では、ビューは複合オブジェクトにバインドされています。このビューにより、binding.property1.property2 (これはストリング) が変更された場合に change ハンドラーが通知を受けるように設定されます。 また、property3 のサブプロパティーが変更された場合には、別の change ハンドラーが通知を受けるように設定されます。 どちらの場合も、change ハンドラーが呼び出されるスコープは、ビューの this スコープです。

リスト型へのバインディング

ビューをリストにバインドすると、リスト・オブジェクト全体が変更された場合に、ビューは自動的に通知を受けます。 例えば、ビューがリスト local.phoneBook.person[] にバインドされているとします。 新規ユーザー・リストが作成され、ビューのバインディングに設定されると (例えば、サーバー・スクリプト構文 tw.local.phoneBook.person = new tw.object.listOf.person(); を使用します)、フレームワークは自動的に変更のビューを通知します。

リスト・アップデートへのバインディング

エレメントが追加、削除、または置換されたときに通知を受けるには、bindAll() 関数を使用して、ビューを手動でバインドする必要があります。 以下のコード例では、リスト・エレメントが追加、削除、または置換されるたびに、ビューの listUpdated 関数が呼び出されます。
var binding = this.context.binding.get("value"); //this is a List object
this.bindAllHandle = binding.bindAll(this.listUpdated, this);

リスト・プロパティーへのバインディング

リストのエレメントの他にも、リストには、ユーザーによって選択されたリスト・エレメントを定義するプロパティーなどの特殊なプロパティーがあります。 特殊なプロパティーについては、以下の表で説明します。
表 1. リストの特殊なプロパティー
プロパティー タイプ 説明
listAllSelectedIndices アレイ ユーザーによって選択されたリスト・エレメントの指標。 選択された指標が複数存在する場合があります。 listAllSelectedIndices を設定すると、指標が配列で渡されます。 リスト選択を更新する場合に listAllSelectedIndices を使用します。
listAllSelected アレイ ユーザーが選択したすべてのエレメントの配列。 listAllSelected を使用して、このプロパティーへの変更をサブスクライブします。 このプロパティーは読み取り専用です。
listSelectedIndex 整数 選択されたエレメントの指標。 この値は、listAllSelectedIndices 配列の指標 0 のエレメントの値に対応しています。 listSelectedIndex を使用して、このプロパティーへの変更をサブスクライブします。 このプロパティーは読み取り専用です。
listSelected オブジェクト 選択されたエレメント。 この値は、listAllSelected 配列の指標 0 のエレメントの値に対応しています。 listSelected を使用して、このプロパティーへの変更をサブスクライブします。 このプロパティーは読み取り専用です。
bindAll() 関数にはこれらの特殊プロパティーは含まれません。
特殊なプロパティーの変更の通知を受け取る場合は、bind() 関数を使用して、個々のプロパティーにサブスクライブできます。 通常は、1 つの特殊プロパティーにサブスクライブするだけで十分です (つまり、すべての特殊プロパティーにサブスクライブする必要はありません)。 以下の例のコードをロード・イベント・ハンドラーに追加して、listAllSelectedIndices の値が変更されるたびに、ビューの indicesChanged 関数を呼び出すことができます。
var binding = this.context.binding.get("value"); //this is a list
this.selectedIndicesHandle = binding.bind("listAllSelectedIndices", this.indicesChanged, this);

リスト・エレメントへのアクセス

リストは、単純型のコレクション、またはプロパティーを持つ複合オブジェクトのコレクションです。 リストからデータを取得するには、以下の表記を使用します。
  • リスト・オブジェクトを取得するには get("value") を使用します。 例えば、次のとおりです。list = this.context.binding.get("value")
  • 指標エレメントを取得するには get(index) を使用します。 例: list.get(0) は、最初のエレメントを取得します。
  • プロパティーの値を取得するには get(property) を使用します。 例: list.get("listSelected") は、listSelected プロパティーの値を取得します。 その他のすべてのプロパティーの値を取得する場合も、同様の構文を使用します。
  • リストの基礎となるエレメントを表す配列を取得するには items を使用します。 例えば、list.itemsです。 items によって返されるデータは、変更しないでください。

リストの操作

リストの変更と、リストに関する情報の取得を行うには、以下の API を使用します。
  • オブジェクトの追加には、 list.add(item) を使用します。 例えば、this.context.binding.get("value").add(item)
  • オブジェクトを削除するには、list.remove(index) を使用します。例: this.context.binding.get("value").remove(0)
  • オブジェクトを置換するには、list.put(index, item) を使用します。 例えば、this.context.binding.get("value").put(0, item)
  • リストの長さを取得するには、list.length() を使用します。
  • リストの索引付きエレメントまたはプロパティーの取得には、 list.get(index | property) を使用します。 以前の「 リスト・エレメントへのアクセス 」を参照してください。
  • リストで選択されたプロパティーをプログラムで更新するには、list.set(property) を使用します。 例えば、this.context.binding.get("value").set("listAllSelectedIndices", [1, 2, 3]);

バインドされたリソースのクリーンアップ

バインディングが必要なくなったら、バインドされたリソースを解放することができます。 それぞれの bind 関数または bindAll 関数は、バインディングのクリーンアップに使用できるハンドルを返します。 バインドされたリソースを解放するには、unload() イベント・ハンドラー内で行うか、またはバインディング・オブジェクト全体が変更されるたびに行う必要があります。 バインディング・データの変更が発生すると、ビューで手動バインディングを解放してから、もう一度 bindbindAll を呼び出して context.binding オブジェクトに再バインドする必要があります。 例えば、change イベント・ハンドラーで以下のコードを追加します。
if (event.type != "config"){
var binding = this.context.binding.get("value"); //this is a list
	// assumes that this.selectedIndicesHandle was initialized in the load function
  this.selectedIndicesHandle.unbind();
this.selectedIndicesHandle = binding.bind("listAllSelectedIndices", this.indicesChanged, this);
	// assumes that this.selectedIndicesHandle was initialized in the load function
this.bindAllHandle.unbind();
this.bindAllHandle = binding.bindAll(this.listUpdated, this);

}

構成オプション

データだけでなく、ビューも構成オプションにバインドできます。 1 つのビューに対して複数の構成オプションを設定できます。 例えば、ボタン・コントロールのラベルは構成プロパティーです。 構成の値は、ビューの this.context.options オブジェクトを使用して取得できます。 オブジェクト context.options には、ビューに対して構成可能なユーザー定義のプロパティーだけでなく、事前定義されたメタデータ・プロパティーが含まれています。
表 2. ビューの事前定義された構成オプション
オプション タイプ 説明
ラベル ストリング ビューのラベルの値 (存在する場合)。
可視性 ストリング ビューの可視性の設定。 有効な値は以下の通り: "DEFAULT"| '"EDITABLE"| '"REQUIRED"| '"READONLY"| '"NONE"| '"HIDDEN" コンテキストオブジェクト参照。 DEFAULTは'Same as parentに相当するコードで、ユーザはVisibilityリストで画面上に表示されます。
重要: 表には 「クリックして編集を無効にする」 構成プロパティーがあります。 デフォルト値は false であり、その表内に含まれるビューが表の可視性設定を使用することを意味します。 つまり、特定のセルのビューは、ユーザーがそのセル内をクリックするまで READONLY です。 クリックすると、ユーザーがセルの外側の任意の場所をクリックするまで、ビューは EDITABLE となります。 クリックすると、ビューは READONLY に戻ります。 「クリックして編集を使用不可にする」が true の場合、これらのビューはそのビューの可視性設定を使用します。
重要: 可視性を REQUIRED に設定しても、ユーザーが値を入力または設定したかどうかは検証されません。 この確認を行うコードを、例えばビューを含んでいる Coach の検証サービスを実装することによって、指定する必要があります。
labelVisibility ストリング ラベルの可視性の設定。 有効な値は "SHOW" | "HIDE" です。
helpText ストリング ビューで、吹き出しテキストとしてこのプロパティーを使用できます。
className ストリング 指定された CSS クラス名。 CSS クラス名はビューの DOM 属性に挿入されるため、通常、ビューでこれを使用する必要はありません。
htmlOverrides マップ 指定された HTML 属性を表す名前と値のペア・マップ。 このような名前と値のペアは、ビューの DOM 属性に挿入されます。
構成オプションは、バインディング・データと同じ方法でアクセスおよび更新されます。 例:
  • ビューの事前定義オプションを取得するには、this.context.options._metadata.* を使用します。 例えば、ビューの可視性オプションを取得するには、this.context.options._metadata.visibility.get("value"); を使用します。
  • ビューの事前定義オプションを設定するには、this.context.options._metadata.* を使用します。 例えば、ビューの可視性オプションの設定には、 this.context.options._metadata.visibility.set("value", newValue); を使用します。
  • ユーザー定義の構成オプションを取得するには、this.context.options.myOption.get("value"); を使用します。myOption はオプション名です。
  • ユーザー定義の構成オプションの設定には、 this.context.options.myOption.set("value", newValue); を使用します。ここで、 myOption はオプション名です。

データ・バインディング・オブジェクトを JSON ストリングにシリアライズするには、そのデータ・バインディング・オブジェクトに対して toJson() 関数を呼び出します。 データ・バインディングを表す基本 JavaScript オブジェクトを取得するには、toJSObject() を呼び出します。