表格中的Ember.js输入复选框

Question

我有很多模型，并在表格中显示。 当用户需要对多个模型执行某些操作时，我们需要让他能够选择行。

如何使用复选框实现它？ 当然我不想在我的模型上为每个表创建特殊字段。

这是一个简单的例子。 https://ember-twiddle.com/0b8f429f6ad3e0572438

我的尝试是：

{{input type='checkbox' checked=model.someNotExistedField}} 

但在这种情况下输入不起作用。

和：

<input type="checkbox" {{action marked model}}  checked={{in-arr record selectedItems}} />

在第二个例子中，我试图将选定的ID保存在上下文中的数组中。 但是id也不起作用。

Answer 1

解决此问题有几个步骤，您在代码示例中未显示这些步骤。

1. 你不需要担心在复选框上绑定一个checked值..它可以管理自己的内部状态，你可以在选择一个项目时利用它......本机<input>应该没问题

   <input type="checkbox">

2. 您将需要一个操作（最好是一个关闭操作 ）来处理选择记录时要执行的操作

   onchange={{action (action "valueHasChanged" item) value="target.checked"}}

3. 您将需要一个数组来存储“选定的项目”

   this.selectedItems = [];

我把一个旋转器放在一起作为这些部件如何组合在一起的一个例子。

（这个答案对于ember 1.13.0及更高版本应该是有效的）

Answer 2

我猜你的模型是一排行。 因此，尝试将chked（boolean）属性添加到模型结构中，这样您现在每行都有一个属性并将其绑定到相应的复选框。

Answer 3

我完成了这样的技术：

1. 组件/动作基于-checkbox.hbs

 {{#if checked}} <input type="checkbox" {{action changed}} checked="checked" /> {{else}} <input type="checkbox" {{action changed}} /> {{/if}} 

2. 在上下文中，我们有包含所选项的数组，例如“selectedItems”

3. 在上下文中，我们有一个管理数组的动作

     //2 and 3 steps example actions:{ marked(id){ this.selectedItems.push(id); var uniq = this.selectedItems.uniq(); this.set('selectedItems', uniq); }, selectedItems:[], 

4.next我将组件放到我的单元格中

{{inputs/action-based-checkbox changed=(action marked record.id) checked=(in-arr record.id selectedItems)}}

in-arr我的“in_array？” 帮助者，灰烬2.3