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');
  },
});

我的类别 Controller

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

在 Controller 中:

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