Ember - 複数のチェックボックスの状態を1つずつ取得します

Question

私はEmberアプリケーション（バージョン1.11、古いもの）で作業しており、複数のチェックボックスがループ内にビルドされています。 実際に要素がチェックされているかチェックされていないかを知る必要があります。

エンバーehbs：

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

エンバーコンポーネント：

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にアクセスして再生したくありません。チェックボックスコンポーネント

あなたは簡単に各チェック項目の値を取得することができるように

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

を次のように

Answer 1

は、コンポーネント

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

として各チェックボックスを作ります。

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