我在容器中有一个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 不允许我在不添加更多文本的情况下发布内容,我还想知道如何通过单击每个类别在同一路线(同一页面)上显示与该类别关联的所有产品?
干杯,谢谢。
最佳答案
在 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}}
关于Ember.JS -toggleProperty 切换列表中的所有项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32795035/