4

我在容器中有一个 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不允许我在不添加更多文本的情况下发布，我还想知道如何通过单击每个类别在同一路线（同一页面）上显示与该类别相关的所有产品？

干杯，谢谢。

4

1 回答 1

3

在控制器中：

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}}
于 2015-09-26T08:23:15.973 回答