属性更改与 Aurelia 的订阅

Question

我的视图模型上有一个属性，我想监听它并根据它的值触发事件，如下所示：

class viewModel {
  constructor() {
    this.value = '0';
    let val = 2;
    subscribe(this.value, callbackForValue);
    subscribe(val, callbackForVal);
  }
}

这是 Aurelia 的功能吗？如果是这样，我将如何设置这样的订阅？

Answer 1

在某些插件中，我一直在使用 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

2015 年 10 月更新

ObserverLocator 是 Aurelia 的内部 "bare metal" API。现在有一个 public 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();
  }
}

Answer 2

listen to and trigger events based on its value

一段使用 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 suggested in the comment above:

Answer 3

根据 I kill nerds.

，可观察属性的绑定开销较小

import {observable} from "aurelia-framework";

export class Example {

    @observable
    public description: string;

    private descriptionChanged(newValue: string, oldValue: string): void {

    }
}

Answer 4

@observable 装饰器适用于这种情况。

您可以使用 BindingEngine 观看 collection 或控制何时 subscribe/unsubscribe

属性更改与 Aurelia 的订阅

Property change subscription with Aurelia

javascript

ecmascript-6

aurelia

2015 年 10 月更新

属性 更改与 Aurelia 的订阅

Property change subscription with Aurelia

javascript

ecmascript-6

aurelia

2015 年 10 月更新

属性更改与 Aurelia 的订阅