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

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

Ура и спасибо.

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