ember.js - Ember复选框已连接

Question

我有一张数据表。您可以选中要保存的行。我的问题是所有复选框均已连接。因此，如果您选中一个，它将全部选中它们；如果您取消选中一个，则它们都会全部取消选中。其中一些已经过预先检查，我正在传递isChecked值来表明这一点。如何使每个人都独一无二？

模板:

<table>
  <thead>
        <tr>
            <th class="center"><br>Select<br> {{input type="checkbox" checked=allChecked}}</th>
            <th class="center">
                <a href="#" {{action 'sortBy' 'itemId'}} {{bind-attr class="itemId:active sortAscending:asc:desc"}}>ID</a>
            </th>
            <th class="">
                <a href="#" {{action 'sortBy' 'description'}} {{bind-attr class="description:active sortAscending:asc:desc"}}>Item Description</a>
            </th>
            <th>{{!-- actions --}}</th>

        </tr>
    </thead>

{{#each item in pagedContent}}
        <tr>
            <td class="center">{{input type="checkbox" checked=isChecked name=item.itemId}}</td>
            <td class="center">{{item.itemId}}</td>
            <td class="">{{item.description}}</td>
        </tr>
{{/each}}
</tbody>
</table>

控制者

import Ember from 'ember';
import pageableTable from 'web-app-admin/mixins/pageable-table';

export default Ember.ArrayController.extend(pageableTable, {
  isChecked: true,
  allChecked: true,
  allCheckedToggle: function(){
      if(this.get('allChecked') === false){
        this.set('isChecked', false);
      }
      else{
        this.set('isChecked', true);
      }
  }.observes('allChecked')
});

Answer 1

模板:

{{#each pagedContent key='itemId' as |item|}}
        <tr>
            <td class="center">{{input type="checkbox" checked=item.isChecked name=item.itemId}}</td>
            <td class="center">{{item.itemId}}</td>
            <td class="">{{item.description}}</td>
        </tr>
{{/each}}

Controller :

import Ember from 'ember';
import pageableTable from 'web-app-admin/mixins/pageable-table';

export default Ember.ArrayController.extend(pageableTable, {
  allChecked: true,
  allCheckedToggle: Ember.observer('allChecked', function() {
    this.get('pagedContent').forEach(function (item) {
      item.set('isChecked', this.get('allChecked'));
    });
  })
});

并将属性添加到项目模型或对象:

isChecked: true

应该能按预期工作。