Aurelia

Question

假设您有一个 class 正在注入另一个 class 或组件。有没有办法观察你正在注入的依赖属性的变化并对其采取行动？

例如，假设您有以下应用程序：

app.html

<template>
  <input type="text" value.bind="item">
  <button click.trigger="addToList()">Add</button>

  <h3>Modded</h3>
  <ul>
    <li repeat.for="it of modded">${it}</li>
  </ul>

  <h3>Original</h3>
  <ul>
    <li repeat.for="it of dep.items">${it}</li>
  </ul>
</template>

app.js

import {bindable, inject} from 'aurelia-framework';
import {Dep} from './dep';

@inject(Dep)
export class App {
  constructor(dep) {
    this.dep = dep;
  }

  attached() {
    this.modifyItems();
  }

  addToList() {
    this.dep.addItem(this.item);
  }

  modifyItems() {
    this.modded = [];
    for (let item of this.dep.items) {
      this.modded.push(item.toUpperCase());
    }
  }
}

dep.js

export class Dep {
  constructor() {
    this.items = ['one', 'two', 'three'];
  }

  addItem(item) {
    this.items.push(item);
  }
}

现在，假设其他一些组件修改了 Dep.items。有没有办法在 this.dep.items 上观察 app.js 的变化，然后调用 modifyItems()？

假设 modifyItems() 比此示例更复杂，因此值转换器可能不是最佳选择。（除非这是我猜的唯一选择）

下面是上面例子中的 plunker：http://plnkr.co/edit/rEs9UM?p=preview

Answer 1

有人向我指出了 BindingEngine.collectionObserver，这似乎正是我所需要的。

app.js:

import {inject} from 'aurelia-framework';
import {BindingEngine} from 'aurelia-binding';
import {Dep} from './dep';

@inject(Dep, BindingEngine)
export class App {
  constructor(dep, bindingEngine) {
    this.dep = dep;

    let subscription = bindingEngine.collectionObserver(this.dep.items)
      .subscribe((newVal, oldVal) => {
        console.debug(newVal, oldVal);
        this.modifyItems();
      });
  }

  attached() {
    this.modifyItems();
  }

  addToList() {
    this.dep.addItem(this.item);
    this.item = '';
  }

  modifyItems() {
    this.modded = [];
    for (let item of this.dep.items) {
      this.modded.push(item.toUpperCase());
    }
  }
}

这是工作的 pluker：http://plnkr.co/edit/Pcyxrh?p=preview

Aurelia - 观察变化的依赖价值

Aurelia - Watch Dependency Value for Change