Ember.JS - toggleProperty toggling all items in list

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.

Daniel Kmak Daniel Kmak · Accepted Answer · 2015-09-26T08:23:15

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}}

Ember.JS - toggleProperty toggling all items in list

1 Answers