Ember - 一个一个地获取多个复选框的状态

Question

我正在开发一个 Ember 应用程序（版本 1.11，旧版本），并且在循环中构建了多个复选框，代码如下。 我需要知道一个元素是否已被选中或未选中。

Ember ehbs：

{{#each item in data}}
 <label>
 <input type="checkbox" checked="isChecked" {{action "getData" item on="change"}}/>
 <span>{{item.type}}</span>
 </label>
{{/each}}

Ember 组件：

var component = Ember.Component.extend({
 isChecked: true,
 actions: {
  getData: function(data){
   var state = this.get('isChecked');
   var type = data.type;
  }
 }
})

我认为变量的“isChecked”值将为每个单独的复选框保留，但事实并非如此，它只是所有复选框的一个变量。 那么，我怎样才能实现这一点，或者检查所有复选框的各个状态，无论是选中还是未选中。

从长远来看，我正试图到达这里 - http://emberjs.jsbin.com/qaruviwuze/edit?html,js，输出但不想访问和使用 DOM，因为它在这里完成。

Answer 1

将每个复选框作为组件

<input type="checkbox" checked="isChecked" {{action "getData" item on="change"}}/>

如下checkbox-component

{{#each model as |item|}}
  {{checkbox-component isChecked=item.isCheked}}
{{/each}}

这样您就可以轻松检索每个检查项的值。

export default Ember.Component.extend({
  tagName: "input",
  isChecked: false,
  attributeBindings: ['type', 'checked'],
  type: 'checkbox',

  checked: function() {
    return this.get('isChecked');
  }.property('isChecked'),

  click: function() {
    console.log(this.set('checked', this.$().prop('checked')))
  }
});

查看https://ember-twiddle.com/996f6408266af8cd4d3372bed8e8331c?openFiles=components.checkbox-component.js%2Ctemplates.components.checkbox-component.hbs