I have a toolbar component which has a list of items. When I click on an element I need to add background color to the clicked element. Also need to deselect the previously selected item.

I tried using classNameBinding but it applies to all the elements in the list.

How can I apply Background Color to the elements which are clicked inside the Component

In Template: 

```
<script type="text/x-handlebars" data-template-name="components/test-toolbar">
  <ul>
     <li {{bindAttr class="bgColor"}} {{action 'redClick'}}> 
      Red
     </li>
     <li {{bindAttr class="bgColor"}}>
      Yellow
     </li>
     <li {{bindAttr class="bgColor"}}>
      Blue
     </li>
  </ul>
</script>

<script type="text/x-handlebars" data-template-name="index">
  <div>
    {{test-toolbar}}
  </div>
</script>

```

In app.js:

```
App.TestToolbarComponent = Ember.Component.extend({
  classNameBindings: ['bgColor'],
  bgColor: false,

  actions: {
    redClick: function () {
       this.set('bgColor', true);
    }
  }
});

```

Here is the working DEMO: [JSBIN LINK](http://emberjs.jsbin.com/gazisu/2/edit#J%3aL14)