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 · Accepted Answer · 2015-09-26T11:43:55.480

3

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

edited Sep 26 '15 at 11:43

answered Sep 26 '15 at 08:23

Daniel Kmak

18,164
7
66
89

Thanks for your great solution. Beautiful. Thank you very much. I have also asked another question, is it possible to give me a solution for that one too? It's getting hard for me to display the products under a specific category on the same page. – TheEarlyMan Sep 26 '15 at 11:06
Answer updated. Use `{{product}}` in each or `{{product.someProperty}}`. – Daniel Kmak Sep 26 '15 at 11:44
Thank you very much. How do I set the toggleProperty in such a way that when one item in the list is clicked, the other one (if open) will close. Something like an accordion effect. – TheEarlyMan Sep 26 '15 at 12:06
You have to loop over model array in expand action to set other categories isExpanded to false and leave only active category. – Daniel Kmak Sep 26 '15 at 12:16

Ember.JS - toggleProperty toggling all items in list

1 Answers1