I have a property on my viewmodel which I want to listen to and trigger events based on its value, like this:
class viewModel {
constructor() {
this.value = '0';
let val = 2;
subscribe(this.value, callbackForValue);
subscribe(val, callbackForVal);
}
}
Is this a feature of Aurelia? If so, how would I go about setting up such a subscription?
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
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();
}
}
The observable attribute has less of an overhead to binding according to I kill nerds.
import {observable} from "aurelia-framework";
export class Example {
@observable
public description: string;
private descriptionChanged(newValue: string, oldValue: string): void {
}
}
listen to and trigger events based on its value
A snippet from code using TypeScript, hopefully that will get you an idea:
import {bindingMode} from "aurelia-binding";
export class Example{
@bindable
public description: string;
private descriptionChanged(newValue: string, oldValue: string): void {
console.log(newValue, oldValue);
}
}
Method name should follow convention `${propertyName}Changed`
EDIT: That's exactly what Decade Moon suggested in the comment above: Property change subscription with Aurelia