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

【问题标题】：Ember.js input checkbox in table表格中的 Ember.js 输入复选框
【发布时间】：2016-02-16 11:32:48
【问题描述】：

我有很多模型并将它们显示在表格中。当用户需要对多个模型做某事时，我们需要给他选择行的能力。

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

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

我的尝试是：

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

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

还有：

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

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

【问题讨论】：

标签： javascript checkbox ember.js input

【解决方案1】：

有几个步骤可以解决这个问题，您的代码示例中没有显示。

您不必担心在复选框上绑定checked 值。它可以管理自己的内部状态，并且您可以在选择项目时利用它...原生<input> 应该没问题

<input type="checkbox">
您将需要一个操作（最好是closure action）来处理选择记录时要执行的操作

onchange={{action (action "valueHasChanged" item) value="target.checked"}}
您将需要一个数组来存储“选定项目”

this.selectedItems = [];

我将a twiddle 放在一起作为这些部分如何组合在一起的一个示例。

（此答案应适用于 ember 版本 1.13.0 及更高版本）

【讨论】：

谢谢你！特别是关于 twiddle =)

【解决方案2】：

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

【讨论】：

同一个模型可以在一张桌子上检查，在另一张桌子上不检查。我需要一些不依赖于我们使用的模型的方法。
stackoverflow.com/questions/19766044/…@user1871941

【解决方案3】：

我完成了这样的技术：

components/action-based-checkbox.hbs

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

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

在上下文中，我们有一个操作，它管理数组

  //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?”助手，ember 2.3

【讨论】：