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 개체의 속성 중 하나가 변경 될 때마다 실행해야합니다. 제 유스 케이스에서는 어떤 속성이 변경 되더라도 상관 없습니다. 단지 속성이 언제 변경되는지 알 필요가 있습니다.

그 방법에 대한 아이디어가 있으십니까?

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의 컨벤션 시스템의 기본 동작이 될 것이므로 생략하고 최종 결과는 동일하게됩니다.