set object that has observed properties breaks the observing system about framework HOT 4 CLOSED

The API propery observer is:

  propertyObserver(obj: object, propertyName: string): PropertyObserver;

It reads like this: for a given obj, and a propertyName, create a observer on obj for that propertyName.

So you can see that what we create is an observer of an object. It doesn't care if you threw that object away to replace it with something else. It only cares about its job: observe propertyName property on object obj.

Probably what you want is to use expression observer:

bindingEngine.expressionObserver(this, 'obj.p1').subscribe(newP1Value => {
  // react to new value of this.obj.p1
});

Using expression observer above, you are observing the whole path specified in that expression, so replacing object will set up new observer properly for you.

from framework.

@ilsergente1993 thanks for filing this issue.

The behavior you experienced is the expected behavior. Observing an object does not and should not observe other objects. In your example, I would observe both obj and its property for changes, so it would look like the following:

import { Disposable } from 'aurelia-framework'; // or 'aurelia-binding'

export class MyClass {
  
  @bindable obj: object;

  subscriptions: Disposable[];
  
  objChanged(newObj) {
    if (this.subscriptions) {
      this.subscriptions.forEach(subscription => subscription.dispose());
      this.subscriptions = undefined;
    }
    if (newObj) {
      this.subscriptions = this.observeObj(newObj);
    }
  }

  /**
   * Return a list of disposables, each mapped to a subscription of corresponding property on a given obj 
   */
  observeObj(obj: object): Disposable[] {
    return Object.keys(obj).forEach(propertyName => {
      this.be.propertyObserver(obj, propertyName).subscribe((newValue, oldValue) => {
        // do something with new value
      });
    }); 
  }
}

from framework.

Thanks for the code @bigopon
I got your point to keep it flexible but, in my opinion, the framework should offer easy ways for common scenarios.
First of all, if I have an object with several properties, I expect one function to observe all the object properties, at least till the first nested level, that share the same callback, like:

this.be.propertyObserver(obj).subscribe((newValue, oldValue) => {
        // do something with new value
      });

and this can return the array of subscriptions or

propertyObserver(obj: Object, propertyName: string | string[]): PropertyObserver | PropertyObserver[]; 

as I wrote before.

Then, actually, I don't understand why this this.obj = { p1: "asd", p2: 10, p3: true }; should not fire the callback and should break the observing system. If I observe only p1 of obj, doing this.obj = { p1: "asd", p2: 10, p3: true }; I actually change p1 property value.

So why shouldn't it fire the callback?

Thanks for the explanation 😄

from framework.

It reads like this: for a given obj, and a propertyName, create a observer on obj for that propertyName.
Now I got it, thanks for the explanation @bigopon

And the expression observer now has a reason to be there 😄
Again, thanks

from framework.