change イベント・ハンドラー

change 関数は、バインディングまたは構成データに変更がある場合に呼び出されます。

使用法

この関数を使用して、バインディング・データまたは構成データの変更に対応します。 この関数が実装されていない場合は、代わりに view() 関数が呼び出されます。

イベント・オブジェクト

この関数は、ユーザーが変更したフィールドおよびその新しい値を示す単一のイベント・オブジェクトを取得します。
表 1. イベント・オブジェクトのプロパティー
プロパティー タイプ 説明
type String 有効な値は "binding"、"config"、未定義、またはヌルです。 未定義値またはヌル値は "binding" を意味します。
property String 変更されたプロパティー
oldVal 単純型の場合は、変更前の値
newVal 新しい値
insertedInto Integer 配列の場合は、オブジェクトがリストに追加された場所のインデックス
removedFrom Integer 配列の場合は、オブジェクトがリストから削除された場所のインデックス
.

change イベントの例

以下の change イベント・コードは、出力テキスト・ストック・コントロールからの抜粋です。 このコードは構成プロパティーが変更されたかどうかを確認し、新しい値でビューを更新します。 最後に、view() 変更イベントを呼び出します。

 1 if (event.type == "config") {
 2 	if (event.property == "_metadata.label") {
 3 		var label = this.context.element.querySelector(".outputTextLabel > label");
 4 		label.innerHTML = this.context.htmlEscape(event.newVal);
 5 	} else if (event.property == "_metadata.helpText") {
		var label = this.context.element.querySelector(".outputTextLabel > label");
		label.title = event.newVal;
	}
} else {
	var newData;
	if (event.newVal != undefined) {
		newData = event.newVal;
	} else {
		newData = "";
	}
 6 	this.context.element.getElementsByTagName("span")[0].innerHTML = this.context.htmlEscape(newData);
}

 7 this.view();
この change() 関数に示されたコードは、以下のロジックを実行します。
  • 1 変更イベント・タイプが「config」の場合は、コードを実行します。 タイプが「config」ではない場合のイベント・タイプは「binding」であることに注意してください。
  • 2 label プロパティーが変更されたかどうかを確認します。
  • 3 CSS 照会セレクターを使用して、クラス .outputTextLabel とその子エレメントのラベル (outputTextLabel は HTML エレメント上のクラス名) でエレメントを検索します。
  • 4 ラベルに新しいテキストを設定します。
  • 5 手順 1 から 5 と同じコードを helpText プロパティーに対して実行します。
  • 6 HTML span エレメントの内容に新しい値を設定します。
  • 7 view() イベント・ハンドラーを呼び出して、初期ロード/作成時および変更発生時に使用したコードを再利用します。