Aurelia：バインドされたオブジェクト（カスタム属性）の特定のプロパティを観察する方法

Question

カスタム属性にバインドされたオブジェクト固有のプロパティの変更イベントを監視しようとしています。私はこのためにbindableタグを使用します。上記の例

オブジェクト

var information = { 
    name: 'foo', 
    description: 'bar', 
    age: 12 
}; 

要素

<div my="info: information;"></div> 

属性

@customAttribute('my') 
export class MyCustomAttribute { 

    @bindable({ 
     changeHandler: 'change' 
    }) 
    public info: any; 

    private change(): void { 
     console.log('info has changed') 
    }  
} 

一度だけ変更ハンドラを起動します。しかし、infoオブジェクトのプロパティの1つが変更されるたびに呼び出す必要があります。私のユースケースでは、どのプロパティが変更されるかは関係ありません。プロパティが変更されたときに知る必要があります。

どのようにすればいいですか？

FYI =>別のアプローチは、オブジェクトを使用する代わりに、ビューモデルで別のプロパティを作成し（その上にバインド可能なタグを使用する）、属性の配管を行うため、 HTMLで面倒な（プロパティの量のために）。

Answer 1

私はそれをこのように解決することができました。 （マルク・Scheibのコメントのおかげで）

import { BindingEngine, Disposable } from 'aurelia-framework'; 

@customAttribute('my') 
export class MyCustomAttribute { 

    @bindable public info: any; 

    private subscription: Disposable; 

    constructor(
     private binding_engine: BindingEngine 
    ) { } 

    public attached(): void { 
     this.subscription = this.binding_engine 
      .propertyObserver(this.info, 'name') 
      .subscribe(() => this.change()) 
    } 

    private change(): void { 
     console.log('info name property has changed') 
    }  

    public detached(): void { 
     this.subscription.dispose(); 
    } 
} 

Answer 2

私が知っている限り、残念ながらネストされたプロパティ値にバインドする方法はありません。観測可能なシステムは、変更されたときにAureliaがフレームワークに通知するために書き換えることができるプロパティに基づいています。 infoプロパティ自体ではなく、ネストされたプロパティを更新するため、通知は行われません。私は最良のアプローチは、FYIで述べたようにして、次に観察する別のプロパティを作成することだと思います。

スタイルに関する注記。あなたはすでにこれを認識しているかもしれませんが、実際にこの@customAttribute('my')デコレータは必要ありません。これはAureliaのコンベンションシステムのデフォルトの動作であるため、そのまま放置すると最終結果は同じになります。