title: Getting active click working on Components in EmberJS?
body: <p>I have a JSON structure that I'm passing into a Toolbar to try out dynamic compartmentalization in EmberJS. It looks like this:</p>
  
  <pre><code>{
      draggable: true,
      buttons: [
        {label: "Portrait", action="vertical"},
        {label: "Landscape", action="horizontal"}
      ]
  }
  </code></pre>
  
  <p>I'm using it in a picture viewer that turns a photo vertically and horizontally. Because it's supposed to be a reusable toolbar for other parts of the application, I made it a Component and hooked the click event to the parent controller so it would turn the picture on click. I wanted the button to also get the active class like it does in other examples, but I think that's not working because of the embedded nature of the buttons. How do I get the button that gets clicked to get the active class so I can add css to it? </p>
  
  <p>I tried setting an isActive property in each of the button objects in the model when init gets called and then setting that as true via the action function but I couldn't get observables to work with nested data structures. Do I have to make each button a separate component or can I avoid that? </p>
  
  <p>Thanks for the help.  </p>
  
  <p><strong>Templates</strong></p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="photo-gallery"&gt;
      &lt;div id="PictureApp"&gt;&lt;/div&gt;
      {{#if toolbar}}
          {{ui-toolbar options=toolbar buttonClicked="changeOrientation"}}
      {{/if}}
  &lt;/script&gt;
  
  &lt;script type="text/x-handlebars" data-template-name="components/ui-toolbar"&gt;
      {{title}}
      &lt;div class="overlay"&gt;
          &lt;div class="toolbar draggable"&gt;
              {{#if draggable}}
              &lt;div class="header draggable-handle"&gt;&lt;/div&gt;
              {{/if}}
              &lt;ul&gt;
                  {{#each buttons}}
                      &lt;li{{action "clicked" this}}&gt;{{label}}&lt;/li&gt;
                  {{/each}}
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>App.UiToolbarComponent = App.Component.extend({
      actions: {
          clicked: function(context){
              console.log(context);
              this.sendAction("buttonClicked", context.action);
  
          }
      },
      didInsertElement: function(){
          if(this.get("draggable")) {
              this.$(".draggable").draggable({handle: ".draggable-handle"});
          }
      }
  });
  </code></pre>