Property change subscription with Aurelia

by

In some plugins I’ve been using DI to get the ObserverLocator instance from the container:

import {inject} from 'aurelia-dependency-injection';  // or from 'aurelia-framework'
import {ObserverLocator} from 'aurelia-binding';      // or from 'aurelia-framework'

@inject(ObserverLocator)
export class Foo {
    constructor(observerLocator) {
        this.observerLocator = observerLocator;
    }
    ...
}

You can then do something like this:

var subscription = this.observerLocator
    .getObserver(myObj, 'myPropertyName')
    .subscribe(myCallback);

When you’re ready to dispose of the subscription, invoke it:

subscription();

I think this is all subject to change but it’s something you could use right now if you needed to.

More info here

October 2015 update

The ObserverLocator is Aurelia’s internal “bare metal” API. There’s now a public API for the binding engine that could be used:

import {inject} from 'aurelia-dependency-injection';  // or from 'aurelia-framework'
import {BindingEngine} from 'aurelia-binding';        // or from 'aurelia-framework'

@inject(BindingEngine)
export class ViewModel {
  constructor(bindingEngine) {
    this.obj = { foo: 'bar' };

    // subscribe
    let subscription = bindingEngine.propertyObserver(this.obj, 'foo')
      .subscribe((newValue, oldValue) => console.log(newValue));

    // unsubscribe
    subscription.dispose();
  }
}

More Related Contents:

  1. What’s the difference between using “let” and “var”?
  2. ECMAScript 6 arrow function that returns an object
  3. One-liner to take some properties from object in ES 6
  4. How to update nested state properties in React
  5. “Uncaught SyntaxError: Cannot use import statement outside a module” when importing ECMAScript 6
  6. How to load external scripts dynamically in Angular?
  7. Curly Brackets in Arrow Functions
  8. Convert a string to a template string
  9. What is “function*” in JavaScript?
  10. Which browsers support import and export syntax for ECMAScript 6?
  11. What is the difference between “let” and “var”?
  12. ES6: import module from URL
  13. ES6 array map doesn’t return anything: ReactJS
  14. Why React Hook useState uses const and not let
  15. ES6 module Import giving “Uncaught SyntaxError: Unexpected identifier”
  16. Override a setter, and the getter must also be overridden
  17. Nested ES6 classes?
  18. Usage of rest parameter and spread operator in javascript
  19. Why can I not use `new` with an arrow function in JavaScript/ES6?
  20. Is Number.IsNaN() more broken than isNaN()
  21. React.js ES6 avoid binding ‘this’ to every method
  22. ES6 – Call static method within a class
  23. Are ES6 template literals faster than string concatenation?
  24. Replace element at specific position in an array without mutating it
  25. Promises, pass additional parameters to then chain
  26. Javascript: Using `.includes` to find if an array of objects contains a specific object
  27. require(‘babel/register’) doesn’t work
  28. JavaScript asynchronous programming: promises vs generators
  29. How to add mixins to ES6 javascript classes?
  30. How to understand JS realms

Leave a Comment