Aurelia是否有AngularJS $ watch替代品？

Egor Malkevich 发表于 Dev

埃戈尔·马尔科维奇

我正在尝试将当前的Angular.js项目迁移到Aurelia.js。我正在尝试做这样的事情：

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>

所以问题是：如何检测列表何时更改？

在Angular.js中，我可以做

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

也许奥雷利亚有类似的东西吗？

亚历山大·米哈申科（Alexander Mikhalchenko）

对于@bindable字段，listChanged(newValue, oldValue)只要list更新值，就会调用该字段。请看看Aurelia文档

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

  valueChanged(newValue, oldValue){
    //
  }
}

您还可以使用ObserveLocator在奥里利亚笔者的博文中描述在这里：

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

正如Jeremy Danyow在这个问题中提到的：

ObserverLocator是Aurelia内部的“裸机” API。现在有一个可用于绑定引擎的公共API：

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

最好的问候，亚历山大

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。