title: Issue binding style of selected item with Aurelia
body: <p>I have the following custom element:</p>
  
  <pre><code>export class FilterBlockCustomElement {
     @bindable selectedfilters = [];
     @bindable filtergroup;
  
     //Add or remove item from selectedfilters list
     selectItem(item) {
        var location = this.selectedfilters.indexOf(item.name);
        if(location &gt; -1)
           this.selectedfilters.splice(location);
        else
           this.selectedfilters.push(item.name);
     }
  }
  </code></pre>
  
  <p>and its associated View:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div style="color: hsl(200,50%,50%); font-size: 1.2em"&gt;
          ${filtergroup.key}
      &lt;/div&gt;
  
      &lt;div click.trigger="selectItem(item)" repeat.for="item of filtergroup.data"&gt;
          &lt;div&gt;${item.name}&lt;/div&gt;&lt;div&gt;${item.count}&lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>What I want to happen is that anytime an item is added to the selectedfilters list, it will be highlited -- when it is removed, the highlighting will disappear.  (I realize that if I just add a property to the item (i.e. item.selected = true) this would probably work, but I'm trying to avoid that for various reasons.)</p>
  
  <p>I added this to my View and VM trying to make this work:</p>
  
  <pre><code>&lt;div repeat.for="item of filters" style.bind="getColor(item)"&gt;...&lt;/div&gt;
  
  //In VM
  getColor(item){
      return {background-color: this.selectedfilters.indexOf(item.name) &gt; -1 ? "red" : undefined}
  }
  </code></pre>
  
  <p>This works on the initial page load but doesn't update the view as items are added and removed from the list.</p>
  
  <p>Is it possible to get this to work?</p>