我使用的是 ember 1.0.0-pre4。
我想显示模型实例的列表。用户应该能够通过单击每行中呈现的按钮或复选框来选择尽可能多的列表条目。
我设法显示了列表。但我不知道如何管理选择状态。当我将{{view Ember.Checkbox checkedBinding="isSelected"}} 之类的内容放入模板时，选择状态将保留在我的模型中。但我不认为这是最好的地方。我认为选择状态属于控制器或视图状态。
您能告诉我存储和访问（多个）列表选择状态的最佳方式吗？
【问题讨论】：
标签： list ember.js multi-select
一种方法是在控制器中保留第二个列表：
App.FooController = Ember.ArrayController.create({
selectedContent: [],
selectToggle: function(event) {
var selectedContent;
selectedContent = this.get(selectedContent);
if (selectedContent.contains(event.context)) {
return this.set('selectedContent', selectedContent.without(event.context));
} else {
return this.get('selectedContent').push(event.context);
}
}
});
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each foo in controller}}
<li {{action selectToggle foo}}>{{foo.name}}</li>
{{/each}}
</ul>
</script>
这只是在控制器中维护一个单独的列表，并根据项目是否被选中来推送/删除。
您还可以使用 Ember.ObjectProxy 通过“isSelected”属性来增加 foo 对象的值。
App.FooController = Ember.ArrayController.create({
selectedContent: @get('content').map(function(item){
Ember.ObjectProxy.create({
content: item
isSelected: false
});
});
});
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each foo in controller.selectedContent}}
<li {{bindAttr class= "foo.isSelected"}}{{action selectToggle foo}}>{{foo.name}}</li>
{{/each}}
</ul>
</script>
然后在您的 selectToggle 方法中，您只需适当地设置 foo 的 isSelected 属性。
【讨论】：