オブジェクトのプロパティで観測可能なAurelia

Question

Aureliaでオブジェクトプロパティが変更されたときに時計を設定しようとしています。私はオブザーバブルを使用していないので、助けてください。ドキュメントに基づいて、ここで私はうまくいくと思うが、ドットが関数名またはobservableを投げ捨てていると思われる。

export class EventEdit { 
    record = { 
    ev_date_start, 
    ev_date_end, 
    ev_description 
    }; 
    @observable record.ev_date_start; 

    record.ev_date_startChanged(newValue, oldValue) { 
    console.log("ev_date_start changed from " + oldValue + " to " + newValue); 
    } 
} 

ev_date_startの値を変更しても何も起こりません。

Answer 1

複雑なオブジェクトが必要な場合は、クラスを定義する方がよいでしょう。

import { observable } from 'aurelia-framework'; 

export class EventEdit { 
    constructor() { 
    this.model = new EventModel(); 

    setTimeout(() => { 
     this.model.ev_date_start = "test"; 
    }, 2000); 
    } 
} 

export class EventModel { 
    @observable ev_date_start; 
    ev_date_end; 
    ev_description; 

    ev_date_startChanged(newValue, oldValue) { 
     console.log("ev_date_start changed from " + oldValue + " to " + newValue); 
    } 
} 

別の解決策は、BindingEngineを使用している：

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

@inject(BindingEngine) 
export class EventEdit { 
    record = { 
    ev_date_start, 
    ev_date_end, 
    ev_description 
    }; 

    constructor(bindingEngine) { 
    this.bindingEngine = bindingEngine; 
    } 

    attached() { 
    this.subs = this.bindingEngine 
     .propertyObserver(this.record, 'ev_date_start') 
     .subscribe(this.ev_date_startChanged); 
    } 

    detached() { 
    this.subs.dispose(); 
    } 

    ev_date_startChanged(newValue, oldValue) { 
    console.log("ev_date_start changed from " + oldValue + " to " + newValue); 
    } 
}