title: Aurelia customAttribute (popover) - bind() behavior not working
body: <p>I am loving Aurelia.io, but now I have a simple issue.</p>
  
  <h2>Here is my set-up:</h2>
  
  <p>I am trying this tutorial: <a href="http://www.sitepoint.com/extending-html-aurelia-io-way/" rel="nofollow">http://www.sitepoint.com/extending-html-aurelia-io-way/</a></p>
  
  <p>I am using Aurelia's navigation-skeleton, release 0.17.0</p>
  
  <hr>
  
  <p>Per the tutorial, I am coding the <strong>popover.js</strong> file, and got this far:</p>
  
  <pre><code>bind() {
    // initialize the popover
    $(this.element).popover({ 
      title: this.title,
      placement: this.placement,
      content: this.content,
      trigger: 'hover' });
  }
  </code></pre>
  
  <p>Now, my problem is that my bindables --i.e. this.title, this.placement, this.content -- are coming up as null.</p>
  
  <p>My hypothesis is that -- for some reasons -- bind() is executing before these properties are being bounded.</p>
  
  <p>For example, when I run the following code, I get "null".</p>
  
  <pre><code>bind() {
      console.log(this.title); //outputs "null"
  }
  </code></pre>
  
  <p>The popover works fine if I hard-code the properties:</p>
  
  <pre><code>//This works great
  
  bind() {
      $(this.element).popover({
          title: "Some Title",
          placement: "right",
          content: "Stuff I wrote",
          trigger: 'hover'
      });
  }
  </code></pre>
  
  <p>So definitely, there is something going on with the bind() behavior.</p>
  
  <p><strong>Has anyone encountered this problem, and is there a simple solution?</strong></p>
  
  <p>Here is the rest of my code:</p>
  
  <hr>
  
  <p>This is my file <strong>popover.js</strong></p>
  
  <pre><code>import {customAttribute, bindable, inject} from 'aurelia-framework';
  import $ from 'bootstrap';
  import bootstrap from 'bootstrap';
  
  @inject(Element)
  @customAttribute('popover')
  export class Popover {
  
      @bindable title;
      @bindable content;
      @bindable placement;
  
      constructor(element) {
          this.element = element;
      }
  
      //Lifecycle///////////////////////////////
  
      bind() {
          $(this.element).popover({
              title: this.title,
              placement: this.placement,
              content: this.content,
              trigger: 'hover'
          });
  
      }
  
      //Change Behaviors//////////////////////
  
      titleChanged(newValue) {
          $(this.element).data('bs.popover').options.title = newValue;
      }
  
      contentChanged(newValue) {
          $(this.element).data('bs.popover').options.content = newValue;
      }
  
      placementChanged(newValue) {
          $(this.element).data('bs.popover').options.placement = newValue;
      }
  
  }
  </code></pre>
  
  <p>This is my file <strong>funny.html</strong>:</p>
  
  <pre><code>&lt;template&gt;
      &lt;require from="./popover"&gt;&lt;/require&gt;
  
      &lt;h1&gt;${greeting}&lt;/h1&gt;
      &lt;ul class="list-group"&gt;
          &lt;li class="list-group-item" repeat.for="p of posts"&gt;
              &lt;img src.bind="p.data.thumbnail" popover="
                  placement: 'right',
                  title.bind = p.data.title,
                  content.bind = p.data.content
              "/&gt;
              &lt;a href="http://reddit.com/${p.data.permalink}"&gt;
                  ${p.data.title}
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Now... I know what you're thinking. If you compare my code for funny.html against the tutorial's, you will notice that I am using commas -- not semicolons -- for separating the properties of the popover attribute:</p>
  
  <pre><code>//I am using commas, not semicolons...
  &lt;img src.bind="p.data.thumbnail" popover="
      placement: 'right',
      title.bind = p.data.title,
      content.bind = p.data.content
  "/&gt;
  </code></pre>
  
  <p>Hehe, naturally you will want to know why I have done this, so I will tell you why.</p>
  
  <p>Originally, when I used semicolons as the tutorial has prescribed, I got a nasty error:</p>
  
  <pre><code>//Using semicolons causes an error...
  &lt;img src.bind="p.data.thumbnail" popover="
      placement: 'right';
      title.bind = p.data.title;
      content.bind = p.data.content
  "/&gt;
  
  //Causes this nasty error on the Javascript Console:
  
  //ERROR [app-router] TypeError: Cannot read property 'split' of null
  //at TemplatingBindingLanguage.inspectAttribute
  </code></pre>
  
  <p>So this is why I have opted to use commas instead of the semicolons, because I did not wish to see this error popping up. (It's possible that my use of commas has caused the issues with bind() behavior not working -- although it's unlikely because I tried binding just one property -- to avoid the use of commas/semicolons -- and the bind() behavior would still not work.)</p>
  
  <p>Could anyone tell me why this error arises, what it means, or how I may move forward?</p>
  
  <p><strong>ERROR [app-router] TypeError: Cannot read property 'split' of null
  at TemplatingBindingLanguage.inspectAttribute</strong></p>
  
  <p>Thank you very much,</p>
  
  <p>-Andy</p>