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