Аурелия: Как наблюдать определенное свойство связанного объекта (пользовательский атрибут)

Я пытаюсь наблюдать событие изменения конкретного объекта, привязанного к пользовательскому атрибуту. Я использую 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 (из-за количества свойств).

2 ответа

Решение

Мне удалось решить это таким образом; (благодаря комментарию Марка Шейба)

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();
    }
}

Насколько я знаю, к сожалению, нет способа привязать значения вложенных свойств. Наблюдаемая система основана на свойствах, которые Aurelia может переписать, чтобы уведомить структуру при их изменении. Потому что вы будете обновлять вложенные свойства, а не info Само свойство, никаких уведомлений не будет запущено. Я думаю, что лучшим подходом было бы сделать, как вы упомянули в FYI, и создать отдельное свойство, которое вы затем наблюдаете.

Заметка о стиле. Возможно, вы уже знаете об этом, но на самом деле вам это не нужно @customAttribute('my') декоратор. Это будет стандартное поведение системы конвенций Аурелии, так что вы можете оставить его, и конечный результат будет таким же.

Другие вопросы по тегам