Ember.JS - toggleProperty toggling all items in list - ember.js

Question

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.
I would love to know how to toggle only the clicked item, not everything from the list.
I am using the ember-cli to build my application.
My category model:
import DS from 'ember-data';
export default DS.Model.extend({
pk: DS.attr('string'),
category: DS.attr('string'),
products: DS.hasMany('product'),
});
My category route:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.findAll('category');
},
});
My category controller
expand: function() {
this.toggleProperty('isExpanded', true);
}
My template:
{{#each model as |i|}}
<tr>
<td>
<a {{action 'expand'}}>{{i.category}}</a>
</td>
<td>
{{i.pk}}
</td>
<td>
{{#if isExpanded}}
<button {{action "deleteCategory"}}>Edit</button>
<button {{action "deleteCategory"}}>Delete</button>
{{else}}
<button {{action 'expand'}}>Actions</button>
{{/if}}
</td>
</tr>
{{/each}}
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?
Cheers and thank you.

Answer 1

In controller:
expand(item) {
if (!item) {
return;
}
item.toggleProperty('isExpanded', true);
}
Template:
{{#each model as |i|}}
<tr>
<td>
<a {{action 'expand' i}}>{{i.category}}</a>
</td>
<td>
{{i.pk}}
</td>
<td>
{{#if i.isExpanded}}
<button {{action "deleteCategory"}}>Edit</button>
<button {{action "deleteCategory"}}>Delete</button>
Products:
{{#each i.products as |product|}}
{{product}}
{{/each}}
{{else}}
<button {{action 'expand' i}}>Actions</button>
{{/if}}
</td>
</tr>
{{/each}}