title: Ember.JS - toggleProperty toggling all items in list
body: <p>I have a toggleProperty in the container to toggle a set of actions on each item. The problem is, when the toggle button on 1 item is clicked, every item is toggled, instead of the one that's clicked.</p>
  
  <p>I would love to know how to toggle only the clicked item, not everything from the list.</p>
  
  <p>I am using the ember-cli to build my application.</p>
  
  <p>My category model:</p>
  
  <pre><code>import DS from 'ember-data';
  
  export default DS.Model.extend({
    pk: DS.attr('string'),
    category: DS.attr('string'),
    products: DS.hasMany('product'),
  });
  </code></pre>
  
  <p>My category route:</p>
  
  <pre><code>import Ember from 'ember';
  
  export default Ember.Route.extend({
    model: function() {
      return this.store.findAll('category');
    },
  });
  </code></pre>
  
  <p>My category controller</p>
  
  <pre><code>expand: function() {
    this.toggleProperty('isExpanded', true);
  }
  </code></pre>
  
  <p>My template:</p>
  
  <pre><code>{{#each model as |i|}}
        &lt;tr&gt;
          &lt;td&gt;
            &lt;a {{action 'expand'}}&gt;{{i.category}}&lt;/a&gt;
          &lt;/td&gt;
          &lt;td&gt;
            {{i.pk}}
          &lt;/td&gt;
          &lt;td&gt;
            {{#if isExpanded}}
              &lt;button {{action "deleteCategory"}}&gt;Edit&lt;/button&gt;
              &lt;button {{action "deleteCategory"}}&gt;Delete&lt;/button&gt;
            {{else}}
              &lt;button {{action 'expand'}}&gt;Actions&lt;/button&gt;
            {{/if}}
          &lt;/td&gt;
        &lt;/tr&gt;
      {{/each}}
  </code></pre>
  
  <p>Since stackoverflow, is not letting me post without adding more text, I would also like to know how to show all the products associated with the category, on the same route (same page), by clicking on each category?</p>
  
  <p>Cheers and thank you.</p>