javascript - 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"}}/>

如下复选框组件

{{#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