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對象上的屬性之一發生更改時，我需要每次觸發它。 在我的用例中，哪個屬性更改無關緊要，我只需要知道什么時候屬性更改即可。

有什么想法嗎？

僅供參考=>一種不同的方法是在視圖模型上創建一個單獨的屬性（並在該模型上使用可綁定標簽），而不是使用該對象，但我寧願不這樣做，因為這會使HTML中的屬性變得冗長乏味（由於屬性的數量）。

Answer 1

我設法解決了這個問題。 （感謝Marc 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約定系統的默認行為，因此可以將其省略，最終結果將是相同的。