title: Binding multiple expressions in custom attributes
body: <p>I am having trouble binding multiple expressions in Aurelia custom attributes. I am posting this because I have been struggling and I believe that the documentation might be missing something (?). Hopefully it is not some stupid thing that I missed so that more people will have use of this aswell.</p>
  
  <p>This is my simplified implementation.</p>
  
  <p><strong>resultCustomAttribute.js</strong></p>
  
  <pre><code>import {inject, bindable} from 'aurelia-framework';
  
  @inject(Element)
  export class resultCustomAttribute {
      @bindable foo;
      @bindable bar;
      constructor(element) {
          this.element = element;
          console.log(this.foo); // =&gt; null
          console.log(this.bar); // =&gt; null
      }
      fooChanged(value){
          console.log(value) // Does not run
      }
  }
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>export function configure(aurelia) {
      aurelia.use
          .standardConfiguration()
          .developmentLogging()
          .feature('resources'); // resources is a folder in the source root
                                    with an index.js file that sets my custom
                                    attribute as a globalResource 
  
      aurelia.start().then(a =&gt; a.setRoot());
  }
  </code></pre>
  
  <p><strong>home.html</strong></p>
  
  <pre><code>&lt;template&gt;
      .
      .
      .
      &lt;div repeat.for="item of items"&gt; &lt;!-- items is an array of objects in home.js--&gt;
          &lt;h4&gt;${item.title}&lt;/h4&gt;
          &lt;div result="foo.bind: item.foo; bar.bind: item.bar"&gt;
              ...
          &lt;/div&gt;
      &lt;/div&gt;
      .
      .
      .
  &lt;/template&gt;
  </code></pre>
  
  <p>The problem is that whatever I bind foo and bar too, they become <code>null</code> in my custom attribute. the element is however passed to the resultCustomAttribute correctly. Is my implementation correct or am I missing something? </p>
  
  <p><strong>EDIT:</strong> The above implementation seems to be correct after all. When I simplified my code to provide a general purpose question, I removed the camelCase named variable <code>selectionIndex</code> and replaced it with <code>bar</code> as seen above. This caused the <code>selectionIndexChanged</code> function not to run.</p>
  
  <p>And the reson that <code>this.foo</code> and <code>this.bar</code> are null in the contructor is simply because the constructor is run before the values are changed for the first time.</p>