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