Ember.JS - toggle属性切换列表中的所有项目

Question

我在容器中有一个toggleProperty来切换每个项目上的一组操作。问题是，当单击一个项目上的切换按钮时，每个项目都会被切换，而不是被点击的项目。

我很想知道如何切换只被点击项目，不是一切从列表中。

我正在使用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}}