title: Aurelia - Watch Dependency Value for Change
body: <p>Suppose you have a class you are injecting into a another class or component. Is there a way to watch for changes on an attributed of the dependency you are injecting and act upon it?</p>
  
  <p>For example, say you have the following app:</p>
  
  <p>app.html</p>
  
  <pre><code>&lt;template&gt;
    &lt;input type="text" value.bind="item"&gt;
    &lt;button click.trigger="addToList()"&gt;Add&lt;/button&gt;
  
    &lt;h3&gt;Modded&lt;/h3&gt;
    &lt;ul&gt;
      &lt;li repeat.for="it of modded"&gt;${it}&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;h3&gt;Original&lt;/h3&gt;
    &lt;ul&gt;
      &lt;li repeat.for="it of dep.items"&gt;${it}&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>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());
      }
    }
  }
  </code></pre>
  
  <p>dep.js</p>
  
  <pre><code>export class Dep {
    constructor() {
      this.items = ['one', 'two', 'three'];
    }
  
    addItem(item) {
      this.items.push(item);
    }
  }
  </code></pre>
  
  <p>Now, let's say that some other component modifies Dep.items. Is there a way to watch for changes in <code>app.js</code> on <code>this.dep.items</code> and then call <code>modifyItems()</code>?</p>
  
  <p>Assume <code>modifyItems()</code> is more complex than this example so maybe a value converter is not the best option. (unless it is the only option I guess)</p>
  
  <p>Here is working plunker with the above example: <a href="http://plnkr.co/edit/rEs9UM?p=preview" rel="nofollow">http://plnkr.co/edit/rEs9UM?p=preview</a></p>