Aurelia - 觀察變化的相關值

Question

假設您有一個課程正在注入另一個課程或組件。有沒有一種方法可以監視您注入的依賴項的變化並對其執行操作？

例如，假設您有以下應用：

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

現在，讓我們說一些其他組件修改fies Dep.items。有沒有辦法看app.jsthis.dep.items的變化，然後致電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