Aurelia binding hook on “nested” data update in custom element

Question

I'm want to get notified, when a update happened in an binded object. This plunk http://plnkr.co/edit/7thr0V demonstrates my problem.

In more detail: I pass an object "data" via bind [data.bind] into a custom element. if i now update a property in data, i would expect, that the "dataChanged" hook in the custom element is called. If i show property from the binded data object in the custom elements template, it gets updated, so the binding itself works properly.

My second reproach is using the ObserverLocator, but it doesn't fire on nested updates, too.

The object in app.js:

this.data = {
  nested: {
    content: "Hello nested world!"
  }
};

The binding to custom element ce:

<require from="ce"></require>
<ce data.bind="data"></ce>

The ce.js part:

@bindable data;

constructor(observerLocator) {
  this.observerLocator = observerLocator;

  var subscription = this.observerLocator
        .getObserver(this, 'data')
        //.getObserver(this, 'data["nested"]["content"]') //Doesn't work
        //.getObserver(this, 'data.nested.content') //Doesn't work
        .subscribe(this.onChangeData);
}

onChangeData(newData, oldData) {
  console.log('data changed from ', oldData, newData);
}

dataChanged(d) {
    console.log("Changed", d);
}

The ce template part:

${data.nested.content}

In app.js I update the data object in 2 intervals. The first interval every second edit a "nested" property. The second interval every five seconds sets the data object new. On the second interval, the hooks and the observer get called, but I want a way to know, when the first intervals did any change.

setInterval(() => {
  this.data.nested.content += "!";
}, 1000);


setInterval(() => {
  this.data = {
  nested: {
    content: "Hello nested world No. " + this.counter++  + "!"
  }
};
}, 5000);

Answer 1

The ObserverLocator is Aurelia's bare metal API for observing simple property changes and array/map/set mutation.

There's a new, higher level API called the BindingEngine that you can use to observe complex expressions.

Here's an example: https://gist.run?id=868a7611952b2e40f350

ce.html

<template>
  ${data.nested.content}


  <!-- debug logging -->
  <h4>Observed Changes:</h4>
  <div repeat.for="change of changes"><pre><code>${change}</code></pre></div>
</template>

ce.js

import {
  bindable,
  BindingEngine,
  inject
} from "aurelia-framework";

@inject(BindingEngine)
export class Ce {
  @bindable data;

  changes = []; // debug logging

  constructor(bindingEngine) {
    this.bindingEngine = bindingEngine;
  }

  expressionChanged(newValue, oldValue) {
    // debug logging:
    this.changes.splice(0, 0, `expressionChanged: "${newValue}"`);
  }

  syncSubscription(subscribe) {
    if (this.subscription) {
      this.subscription.dispose();
      this.subscription = null;
    }
    if (subscribe && this.data) {
      let observer = this.bindingEngine.expressionObserver(this.data, 'nested.content');
      this.subscription = observer.subscribe(::this.expressionChanged);
    }
  }

  dataChanged(newValue, oldValue) {
    // subscribe to new data instance
    this.syncSubscription(true);

    // debug logging:
    this.changes.splice(0, 0, `dataChanged: ${JSON.stringify(newValue, null, 2)}`);
  }

  attached() {
    // subscribe
    this.syncSubscription(true);
  }

  detached() {
    // unsubscribe (avoid memory leaks)
    this.syncSubscription(false);
  }
}

Why doesn't aurelia observe whole objects for changes by default?

It's too expensive in terms of speed and memory to eagerly observe everything. Not all browsers support object.observe.