ObservableValue: bindData()

引数で渡されたオブジェクトをバインディングターゲットとして登録します。

構文

observableValue.bindData(target) => boolean
observableValue.bindData(target, twoWay) => boolean

引数

• target: Object

  バインドする対象のオブジェクトです。ターゲットは以下のメソッドを持ちます：

  • setValue(newValue)

    バインディングターゲットの値を newValue で更新してください。 また、バインディングソースにもこの更新を反映してください。

    • newValue: any

      更新する値です。

  • onDataBinding(source)

    bindData() に渡された時に呼び出されるコールバック関数です。 処理が正しく完了したらターゲットにバインディングソースをプロパティ source にセットしてください。 セットしなければバインドは失敗します。

    • source: Object

      バインドソースへの参照です。以下のメソッドを持っています。

      • setValue(newValue) => boolean

        バインドが双方向であれば newValue でソースを更新します。 単方向であればソースの値でターゲットを更新します。

        返値は値の更新に成功したかどうかを示します。成功した場合は true を、失敗した場合は false を返します。

    また、すでに source を持っていた場合、他のバインディングソースにバインド済みと判定されてこのバインドは失敗します。

  info

  AlierTextField などのカスタムエレメントは以上の条件を満たしています。

• twoWay: boolean （省略可）

  双方向バインディングを行うかどうかです。true なら双方向バインディングを、false なら単方向バインディングを要求します。

  双方向バインディングされるかどうかは双方向バインディングが許可されているかどうか、つまり allowsTwoWay が true かどうかに依存します。 もし双方向バインディングが許可されていない状態で双方向バインディングを要求した場合、バインドは成功しますが、単方向モードでバインドされます。

  既定値は allowsTwoWay と同じ値になります。

返値: boolean

登録に成功したかどうかです。true ならバインディングターゲットの登録に成功したか、既に自身に登録済みであることを示し、false なら何らかの理由で登録に失敗したことを示します。

例

バインドターゲットが既にバインド済みである場合、そのバインドは失敗します。

// バインド可能なオブジェクトを生成
const target = create_target("Alice");

// 未バインドなのでバインドに成功する
const ov1 = new ObservableValue("Carol");
ov1.bindData(target);
// => true

// バインド済みなのでバインドに失敗する
const ov2 = new ObservableValue("Dave");
ov2.bindData(target);
// => false

双方向が許可されていない場合、第二引数の値に関わらず単方向でバインドされます。

// バインド可能なオブジェクトを生成
const target = create_target("Alice");

const ov = new ObservableValue("Carol", false);

// 双方向バインドを要求するが、 allowsTwoWay=false であるため単方向バインドになる
// ソースの値 "Carol" がターゲットに反映される
ov.bindData(target, true);

// 単方向バインドなので値は逆戻りする
target.setValue("Eve");
// => false
console.log(target.getValue());
// => "Carol"

双方向が許可されている場合、第二引数の値によってバインドの方向が決定されます。

// バインド可能なオブジェクトを生成
const target_oneway = create_target("Alice");
const target_twoway = create_target("Bob");

const ov = new ObservableValue("Carol", true);

// 単方向バインド
ov.bindData(target_oneway, false);

// 双方向バインド
ov.bindData(target_twoway, true);

// 単方向バインドなので値は逆戻りする
target_oneway.setValue("Eve");
// => false
console.log(ov.getValue());
// => "Carol"

// 双方向バインドなので値が更新される
target_twoway.setValue("Ellen");
// => true
console.log(ov.getValue());
// => "Ellen"

バインド可能なオブジェクトのファクトリ関数

以下のサンプルコードは上記の例で出現していたバインド可能なオブジェクトを生成するファクトリ関数の例です。

function create_target(value) {
    let private_value = value;

    return {
        setValue(newValue) {
            private_value = newValue;
            return this.source?.setValue(private_value);
        },
        onDataBinding(source) {
            this.source = source;
            return true;
        },
        getValue() {
            return private_value;
        },
    };
}