Ember.JS - toggleProperty, переключающий все элементы в списке

Question

У меня есть toggleProperty в контейнере, чтобы переключать набор действий по каждому элементу. Проблема в том, что при нажатии кнопки переключения на 1 элемент каждый элемент переключается, а не тот, который нажат.

Мне очень хотелось бы знать, как переключать только щелкнутый элемент, а не все из списка.

Я использую ember-cli для создания моего приложения.

Моя категория Модель:

import DS from 'ember-data'; 

export default DS.Model.extend({ 
    pk: DS.attr('string'), 
    category: DS.attr('string'), 
    products: DS.hasMany('product'), 
}); 

Моя категория Маршрут:

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model: function() { 
    return this.store.findAll('category'); 
    }, 
}); 

Моя категория контроллер

expand: function() { 
    this.toggleProperty('isExpanded', true); 
} 

Мой шаблон:

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

Поскольку stackoverflow, не позволяет мне отправлять сообщения без добавления текста, я также хотел бы знать, как показать все продукты, связанные с категорией, на том же маршруте (на той же странице), нажав на каждую категорию?

Приветствия и благодарности.

Answer 1

В контроллере:

expand(item) { 
    if (!item) { 
    return; 
    } 
    item.toggleProperty('isExpanded', true); 
} 

Шаблон:

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