title: filter out elements on click
body: <p>I have a component that display a bunch of data with different status.Each data is wrap up on different div.I also have a menu bar that suppose to show ONLY the elements that are bind with that action. I want to be able to hide elements that are not associate with onclick action.</p>
  
  <pre><code>&lt;script type="text/x-handlebars" id="new"&gt;
      &lt;section&gt;
          &lt;ul&gt;
              &lt;li {{action 'showAllLeads'}} {{bind-attr class="allLeadsTabIsActive:activeMenuTab"}}&gt;
                  &lt;a href="#"&gt;
                      &lt;i class="icon-menu"&gt;&lt;/i&gt;ALL
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li {{action 'newLeads'}} {{bind-attr class="newLeadsTabIsActive:activeMenuTab"}}&gt;
                  &lt;a href="#"&gt;TWO&lt;/a&gt;
              &lt;/li&gt;
              &lt;li {{action 'activeLeads'}} {{bind-attr class="activeLeadsTabIsActive:activeMenuTab"}}&gt;
                  &lt;a href="#"&gt;
                      &lt;i class="icon-right-open"&gt;&lt;/i&gt;ONE
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/section&gt;
  &lt;/script&gt;
  
  
  App.NewController = Ember.Controller.extend({
      actions: {
          showAllLeads: function(){
              this.send('resetTabs');
              this.set('allLeadsTabIsActive', true);
          },
          activeLeads: function(){
              this.send('resetTabs');
              this.set('activeLeadsTabIsActive', true);
          },
          newLeads: function(){
              this.send('resetTabs');
              this.set('newLeadsTabIsActive', true)
          },
          resetTabs: function(){
              this.set('allLeadsTabIsActive', false);
              this.set('newLeadsTabIsActive', false);
              this.set('activeLeadsTabIsActive', false);
          },
      }
  });
  </code></pre>