Ember 循环遍历一组复选框并获取选中的项目？

Question

我有一个 Ember.js 应用程序（使用 Ember CLI）。我有一个名为sideMenu 的组件，其中包含文件sideMenu.js 和sideMenu.hbs。在 .js 文件中，我有一组车辆名称，如下所示：

export default Ember.Component.extend({
    vehicles: ['Audi', 'Chrysler', 'Harley Davidson'],
    vehicleCheckboxes: { 'Audi': true, 'Chrysler': true, 'Harley Davidson': true }
});

在这个组件的模板中，我循环遍历这些车辆并为每个项目创建一个复选框，如下所示：

{{#each vehicles as |vehicle|}}
    {{input type='checkbox' checked='true'}} {{vehicle}}
{{/each}}

这给了我我想要的东西——旁边有几个带有车辆名称的复选框。我希望能够知道用户在此列表中未选中/选中的内容。我尝试通过在模板中动态创建一些 Ember 属性来做到这一点：

{{input type='checkbox' checked="{{vehicleCheckboxes}}.{{vehicle}}"}}

但这似乎不起作用。我怎样才能做到这一点？ Ember 文档中似乎没有任何迹象表明它可以以任何方式从框架内进行。

Answer 1

checked 需要布尔值 (true/false) 你可以像这样使用addon：

{{multiselect-checkboxes options=vehicles selection=selectedVehicles}}

或者你可以有这样的循环：

{{#each vehicles as |vehicle|}}
    {{input type='checkbox' checked=(get vehicleCheckboxes vehicle)}} {{vehicle}}
{{/each}}

并且您需要将您的 vehicleCheckboxes 转换为 Ember.Object 我认为如果它不能按原样工作

vehicleCheckboxes: Ember.Object.create({ 'Audi': true, 'Chrysler': true, 'Harley Davidson': true })