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;
  }
 }
})

我认为变量＆＃34; isChecked＆＃34;将为每个复选框保留值，但不是这种情况，它只是所有复选框的一个变量。那么，我怎样才能实现这个OR或检查所有复选框的各个状态，无论是选中还是未选中。

从长远来看，我试图到达 - 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

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

1 个答案: