In Aurelia binding if in a component we use observable decoration on a property, and if the property being an object, then we will subscribe to all properties of that object.
For example:
import { observable } from 'aurelia-framework';
export class Car {
@observable color = {rgb: '', hex: ''};
colorChanged(newValue, oldValue) {
// this will fire whenever the 'color' property changes
}
}
So if one of the color properties changes, then it will fire colorChanged. But in custom elements we have bindables like this:
import {bindable, bindingMode} from 'aurelia-framework';
export class SecretMessageCustomElement {
@bindable data;
dataChanged () {
// -------
}
}
then dataChanged won't be called on its properties change. How can this be solved?
With some tries, I have written some lines of code that fixed my issue and hope helping others. I have subscribed and unsubscribed on every data change occuring and made this subscription to be done on every field every time. So here is the solution:
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');
}
}
although this is part of code, it has the main idea. TG.