Ember.js表中的输入复选框

Ember.js input checkbox in table

本文关键字：输入 复选框 js Ember      更新时间：2023-09-26

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

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

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

我的尝试是：

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

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

和：

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

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

有几个

步骤可以解决此问题，这些步骤尚未在代码示例中显示。

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

    <input type="checkbox">

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

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

  3. 您将需要一个数组来存储"所选项目">

    this.selectedItems = [];

我把一个twiddle放在一起，作为这些部分如何组合在一起的一个例子。

(此答案在 ember 版本 1.13.0 及更高版本中应该有效(

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

我完成了这样的技术：

  1. 组件/基于操作的复选框.hbs

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

  1. 在上下文中，我们有包含选定项目的数组，例如"选定项目">

  2. 在上下文中，我们有一个操作，用于管理数组

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

4.接下来我将组件放入我的单元格 

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

在Arr My "in_array？" helper， ember 2.3

相关文章：