在Aurelia绑定中,如果在组件中我们对属性使用可观察的修饰,并且如果该属性是对象,则我们将订阅该对象的所有属性。
例如:
import { observable } from 'aurelia-framework';
export class Car {
@observable color = {rgb: '', hex: ''};
colorChanged(newValue, oldValue) {
// this will fire whenever the 'color' property changes
}
}
因此,如果颜色属性之一发生更改,则它将触发colorChanged。但是在自定义元素中,我们具有如下所示的可绑定对象:
import {bindable, bindingMode} from 'aurelia-framework';
export class SecretMessageCustomElement {
@bindable data;
dataChanged () {
// -------
}
}
然后dataChanged不会在其属性更改时被调用。该如何解决?
答案 0 :(得分:2)
这里是一个示例:https://gist.run/?id=040775f06aba5e955afd362ee60863aa
@observable color = { rgb: '', hex: '' }
colorChanged(val) { }
colorChanged
仅当重新分配了整个color属性后,rgb或hex的更改才会更改。
答案 1 :(得分:1)
通过一些尝试,我编写了一些代码行来解决我的问题,并希望对其他人有所帮助。我已对发生的每个数据更改进行了订阅和取消订阅,并且每次都需要在每个字段上进行此订阅。所以这是解决方案:
import {
bindable,
BindingEngine
} from 'aurelia-framework';
@inject(Element, BindingEngine)
export class PaChartjs {
@bindable data;
@bindable options;
constructor(element, bindingEngine) {
this.element = element;
this.bindingEngine = bindingEngine;
}
bind() {
this.observeObject(this.data, 'data');
this.observeObject(this.options, 'options');
}
unbind() {
this.unobserveObjects();
}
unobserveObjects(groups) {
let self = this;
if (!groups) {
groups = Object.keys(this.subscriptions);
}
groups.forEach((groupitem, groupindex) => {
this.subscriptions[groupitem].forEach((subitem, subindex) => {
subitem.sub.dispose();
delete self.subscriptions[subindex];
}); //otherwise you'll bind twice next time
});
}
observeObject(obj, group) {
let self = this;
if (!this.subscriptions) {
this.subscriptions = [];
}
if (!this.subscriptions[group]) {
this.subscriptions[group] = [];
}
Object.keys(obj).forEach((keyitem, keyindex) => {
if (typeof obj[keyitem] === 'object' && obj[keyitem] !== null) {
self.observeObject(obj[keyitem]);
} else {
this.subscriptions[group].push({
obj: obj,
property: keyitem,
sub: this.bindingEngine
.propertyObserver(obj, keyitem) //e.g. subscribe to obj
.subscribe(() => this.objectPropertyChanged()) //subscribe to prop change
});
}
});
}
objectPropertyChanged(newValue, oldValue) {
this.heavyJobHandler(() => this.updateChartData());
}
dataChanged(newValue, oldValue) {
this.unobserveObjects(['data']);
if (this.chartObj) {
this.chartObj.data = newValue;
this.heavyJobHandler(() => this.updateChartData());
}
this.observeObject(this.data, 'data');
}
optionsChanged(newValue, oldValue) {
this.unobserveObjects(['data']);
if (this.chartObj) {
this.chartObj.options = options;
this.heavyJobHandler(() => this.updateChartData());
}
this.observeObject(this.options, 'options');
}
}
尽管这是代码的一部分,但它具有主要思想。 TG。