title: change detection with the observerLocator
body: <p>I am trying to make an 'insert-file' custom element.</p>
  
  <p>This is how it might be used</p>
  
  <pre><code>&lt;template&gt;
    &lt;require from='./insert-file'&gt;&lt;/require&gt;
  
    &lt;section&gt;
      &lt;insert-file fileName.bind="fn.fileName"&gt;&lt;/insert-file&gt;
    &lt;/section&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>This is the custom element's view</p>
  
  <pre><code>&lt;template&gt;
    &lt;div innerhtml.bind="fileContent"&gt;&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>And this is the element's view-model</p>
  
  <pre><code>import {inject,bindable,customElement,ObserverLocator} from 'aurelia-framework';
  import {HttpClient} from 'aurelia-http-client';
  
  @customElement('insert-file')
  @inject(HttpClient,ObserverLocator)
  export class InsertFile {
      @bindable fileName = '';
  
      constructor(http,observerLocator) {
          this.http = http;
          this.fileContent = '...trying';
          var subscription = observerLocator
              .getObserver(this, 'fileName')
              .subscribe(this.onFileNameChange.bind(this));
      }
  
      onFileNameChange(newValue, oldValue) {
          function onSuccess(response) {
              this.fileContent = 'success';
          }
          function onFailure(response) {
              this.fileContent = 'failure';
          }
          this.http.get(newValue).then(onSuccess.bind(this), onFailure.bind(this));
      }
  
  }
  </code></pre>
  
  <p>The idea is to notice when fileName attribute changes (programmatically, not interactively, in my use case) and take appropriate action, i.e. load the file and insert its contents in the DOM.</p>
  
  <p>The problem is that:</p>
  
  <ol>
  <li>it doesn't work (no error messages and in the debugger everything seems ok)</li>
  <li>the double binding of 'this' seems too complex</li>
  </ol>
  
  <p>What am I doing wrong? Any ideas?</p>
  
  <p>--- EDIT ---</p>
  
  <p>Let me simplify. Can I do this?</p>
  
  <pre><code>&lt;div innerhtml.bind="someVar"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>If the value of <code>someVar</code> later changes, will the view be updated?</p>