我的viewmodel上有一个属性,我想听,并根据其值触发事件,如下所示:
class viewModel {
constructor() {
this.value = '0';
let val = 2;
subscribe(this.value, callbackForValue);
subscribe(val, callbackForVal);
}
}
这是Aurelia的特色吗?如果是这样,我将如何设置这样的订阅?
答案 0 :(得分:51)
在某些插件中,我一直在使用DI从容器中获取ObserverLocator
个实例:
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;
}
...
}
然后你可以这样做:
var subscription = this.observerLocator
.getObserver(myObj, 'myPropertyName')
.subscribe(myCallback);
当您准备处置订阅时,请调用它:
subscription();
我认为这一切都有可能发生变化,但如果您需要,可以立即使用它。
更多信息 here
ObserverLocator是Aurelia的内部"裸机" API。现在可以使用绑定引擎的公共API:
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();
}
}
答案 1 :(得分:11)
根据其值
收听和触发事件
使用TypeScript的代码片段,希望能让您了解一下:
import {bindingMode} from "aurelia-binding";
export class Example{
@bindable
public description: string;
private descriptionChanged(newValue: string, oldValue: string): void {
console.log(newValue, oldValue);
}
}
方法名称应遵循惯例`${propertyName}Changed`
编辑:这正是Decade Moon在上述评论中建议的内容:Property change subscription with Aurelia
答案 2 :(得分:11)
根据I kill nerds,observable属性对绑定的开销较小。
import {observable} from "aurelia-framework";
export class Example {
@observable
public description: string;
private descriptionChanged(newValue: string, oldValue: string): void {
}
}
答案 3 :(得分:2)
@observable
装饰器适用于此场景。
您可以使用BindingEngine
观看收藏或控制何时订阅/取消订阅