Aurelia 的物业变更订阅答案

【问题标题】：Property change subscription with AureliaAurelia 的物业变更订阅
【发布时间】：2015-04-09 18:02:22
【问题描述】：

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

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

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

【问题讨论】：

我很确定这有一个 Aurelia 抽象？
实际上你是第一个向我展示 Aurelia 的人，但我已经知道 Object.oberve() 并且当我访问出现的 Aurelia 网站时。是的，这就是我没有回答的原因，如果没有帮助，我只是评论了抱歉。
@edwin 感谢您的工作 :) 继续努力。
您实际上可以在要观察的属性上使用@bindable 注解，当属性值发生变化时，它将调用视图模型类上的[property name]Changed 函数。可能不是 @bindable 的用途，但它确实有效。
@DecadeMoon，可能@observable 注释是为您所说的目的而设计的。

标签： javascript ecmascript-6 aurelia

【解决方案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 的内部“裸机”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();
  }
}

【讨论】：

您可以使用 Aurelia 的事件聚合器功能吗？
@ChiRow 请不要滥用 EventAggregator！在这种情况下可以使用它，但如果您考虑订阅者，则通常会考虑紧密耦合的行为，而 EventAggregator 用于松散耦合的行为。
@jeremy-danyow 干得好，当 api 发生变化时别忘了更新这个 :)
@jeremy-danyow propertyObserver 和 expressionObserver 有什么区别？
propertyObserver 观察特定属性（例如firstName）并在属性更改时通知您。 expressionObserver 观察整个表达式（例如foo.bar[x][baz].hello() * test / something）并在表达式结果发生变化时通知您。

【解决方案2】：

根据I kill nerds，observable 属性的绑定开销较小。

import {observable} from "aurelia-framework";

export class Example {

    @observable
    public description: string;

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

    }
}

【讨论】：

【解决方案3】：

根据其值监听并触发事件

使用 TypeScript 的代码中的 sn-p，希望这能让您有所了解：

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

【讨论】：

我最喜欢这个解决方案。它使用更少的代码来完成相同的任务。
之所以有效，是因为 description 是一个字符串。上面的方法不适用于对象和数组，就像最初的问题一样。据我所知。

【解决方案4】：

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

您可以使用BindingEngine 观看收藏或控制何时订阅/取消订阅

【讨论】：