title: Binding properties from view-model to custom element in Aurelia
body: <p>UPDATE:</p>
  
  <p>Other people have reported this sample works well for them. Sounds like I was doing something wrong but I don't have the code anymore so I can't check what was the problem.</p>
  
  <p>ORIGINAL QUESTION:</p>
  
  <p>I have the following custom element with the following view-model and view:</p>
  
  <pre><code>import {bindable} from 'aurelia-framework';
  export class Test1 {
    @bindable name = null;
  }
  
  &lt;template&gt;
    &lt;div&gt;Name: ${name}&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Then I have a this view and view-model using the above custom element (this is the welcome page in the skeleton project):</p>
  
  <pre><code>export class Welcome {
    constructor() {
      this.name = 'Test';
    }
  }
  
  &lt;template&gt;
    &lt;require from="./components/test1"&gt;&lt;/require&gt;
    &lt;test1 name.bind="name"&gt;&lt;/test1&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>My expectation is to see "Name: Test" but I only get "Name: ". If I use a string and remove the ".bind" then it works:</p>
  
  <pre><code>&lt;test1 name="Test"&gt;&lt;/test1&gt;
  </code></pre>
  
  <p>But I want it to update automatically whenever I update the "name" field in the "App" view-model.</p>
  
  <p>I'm not sure what I'm doing wrong. I don't see any error in the console.</p>
  
  <p>I based this example on the skeleton sample project from Aurelia. Version of aurelia-framework is 0.11.0.</p>