Aurelia - 观察变化的依赖值答案

【问题标题】：Aurelia - Watch Dependency Value for ChangeAurelia - 观察变化的依赖值
【发布时间】：2016-02-05 18:45:32
【问题描述】：

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

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

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

【问题讨论】：

标签： aurelia

【解决方案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

【讨论】：