Aurelia:如何观察绑定对象的特定 属性(自定义属性)
Aurelia: How to observe a specific property of a bound object (custom attribute)
我正在尝试观察绑定到自定义属性的特定对象 属性 的更改事件。我为此使用 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 中属性的管道很繁琐(因为属性的数量)。
据我所知,不幸的是,没有办法绑定到嵌套的 属性 值。可观察系统基于可由 Aurelia 重写的属性,以便在更改时通知框架。因为您将更新嵌套属性而不是 info
属性 本身,所以不会触发任何通知。我认为最好的方法是按照您在 FYI 中提到的那样做,并创建一个单独的 属性 然后您会观察到。
风格说明。您可能已经意识到这一点,但您实际上并不需要这个 @customAttribute('my')
装饰器。这将是 Aurelia 约定系统的默认行为,因此您可以将其省略,最终结果将相同。
我是这样解决的; (感谢 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();
}
}
我正在尝试观察绑定到自定义属性的特定对象 属性 的更改事件。我为此使用 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 中属性的管道很繁琐(因为属性的数量)。
据我所知,不幸的是,没有办法绑定到嵌套的 属性 值。可观察系统基于可由 Aurelia 重写的属性,以便在更改时通知框架。因为您将更新嵌套属性而不是 info
属性 本身,所以不会触发任何通知。我认为最好的方法是按照您在 FYI 中提到的那样做,并创建一个单独的 属性 然后您会观察到。
风格说明。您可能已经意识到这一点,但您实际上并不需要这个 @customAttribute('my')
装饰器。这将是 Aurelia 约定系统的默认行为,因此您可以将其省略,最终结果将相同。
我是这样解决的; (感谢 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();
}
}