データのバインディングと構成オプション
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 にハンドルを返します。
コールバック・シグニチャーについては、「 関数 (イベント) 」トピックを参照してください。
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);リスト・プロパティーへのバインディング
リストのエレメントの他にも、リストには、ユーザーによって選択されたリスト・エレメントを定義するプロパティーなどの特殊なプロパティーがあります。 特殊なプロパティーについては、以下の表で説明します。| プロパティー | タイプ | 説明 |
|---|---|---|
| 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() イベント・ハンドラー内で行うか、またはバインディング・オブジェクト全体が変更されるたびに行う必要があります。 バインディング・データの変更が発生すると、ビューで手動バインディングを解放してから、もう一度 bind や bindAll を呼び出して 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 には、ビューに対して構成可能なユーザー定義のプロパティーだけでなく、事前定義されたメタデータ・プロパティーが含まれています。| オプション | タイプ | 説明 |
|---|---|---|
| ラベル | ストリング | ビューのラベルの値 (存在する場合)。 |
| 可視性 | ストリング | ビューの可視性の設定。 有効な値は以下の通り: "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() を呼び出します。