Does Aurelia have an AngularJS $watch alternative?

Question

I'm trying to migrate my current Angular.js project to Aurelia.js. I'm trying to do something like that:

report.js

export class Report {
       list = [];

       //TODO
       listChanged(newList, oldList){
             enter code here
       }
}

report.html

<template>
    <require from="component"></require>
    <component list.bind="list"></component>
</template>

So the question is: how to detect when is the list changed?

In Angular.js I can do

$scope.$watchCollection('list', (newVal, oldVal)=>{ my code });

Maybe Aurelia have something similar?

score 9 · Accepted Answer · edited May 23 '17 at 11:46

For @bindable fields the listChanged(newValue, oldValue) would be called whenever the list value is updated. Please take a look Aurelia docs

@customAttribute('if')
@templateController
export class If {
  constructor(viewFactory, viewSlot){
    //
  }

  valueChanged(newValue, oldValue){
    //
  }
}

You can also use ObserveLocator as described in Aurelia author's blogpost here:

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

@inject(ObserverLocator)
class Foo {  
  constructor(observerLocator) {
    // the property we'll observe:
    this.bar = 'baz';

    // subscribe to the "bar" property's changes:
    var subscription = this.observerLocator
      .getObserver(this, 'bar')
      .subscribe(this.onChange);
  }

  onChange(newValue, oldValue) {
    alert(`bar changed from ${oldValue} to ${newValue}`);
  }
}

UPD

As mentioned in this question by Jeremy Danyow:

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

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();
  }
}

Best regards, Alexander

don't you know solution with custom events? – Egor Malkevich Nov 18 '15 at 18:48 — Egor Malkevich, Nov 18 '15 at 18:48

score 7 · Answer 2 · edited Jun 20 '20 at 09:12

Your original code will work with one small tweak:

report.js

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

export class Report {
       @bindable list;  // decorate the list property with "bindable"

       // Aurelia will call this automatically
       listChanged(newList, oldList){
             enter code here
       }
}

report.html

<template>
    <require from="component"></require>
    <component list.bind="list"></component>
</template>

Aurelia has a convention that will look for a [propertyName]Changed method on your viewmodel and call it automatically. This convention is used with all properties decorated with @bindable. More info here

score 1 · Answer 3 · answered Nov 18 '15 at 19:20

It seems better solution for current case is CustomeEvent

So complete solution would look like that

report.html

<template>
    <require from="component"></require>
    <component list.bind="list" change.trigger="listChanged($event)"></component>
</template>

component.js

@inject(Element)
export class ComponentCustomElement {
    @bindable list = [];

    //TODO invoke when you change the list
    listArrayChanged() {
        let e = new CustomEvent('change', {
            detail: this.lis
        });

        this.element.dispatchEvent(e);
    }
}

You have to change component element, add some trigger function that sand you change event. I suppose that component knows when list changed.

Does Aurelia have an AngularJS $watch alternative?

3 Answers3

UPD

Your original code will work with one small tweak: