observableaureliabindable

Aurelia make bindable act as observable on object properties


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?


Solution

  • 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.