Ember 'Toggle All' Checkbox #2

controllers.application.js

import Ember from 'ember';

var COLORS = 'peachpuff khaki papayawhip cadetblue orchid seashell gainsboro thistle olivedrab aquamarine azure crimson darkslategray goldenrod cornsilk chartreuse darksalmon firebrick honeydew'.w();
var ID = 4;

export default Ember.ObjectController.extend({
  toggles: function(){ return Ember.A([]) }.property(),
  
  allChecked: function(key, value){ 
    if (arguments.length === 1) {
      var toggles = this.get('toggles');
      return toggles && toggles.isEvery('isChecked')
    } else {
      this.get('toggles').setEach('isChecked', value);
      return value;
    }
  }.property('toggles.@each.isChecked'),
  
  allSelectedItems: Ember.computed.filterBy('toggles', 'isChecked', true),
  
  totalSelectedCount: Ember.computed.alias('allSelectedItems.length'),
  
  actions: {
    registerToggle: function(toggle) {
      this.get('toggles').addObject(toggle);
    },
    deregisterToggle: function(toggle) {
      this.get('toggles').removeObject(toggle);
    },
    add: function() {
      var color = COLORS[Math.floor(Math.random() * COLORS.length)];
      this.get('model').pushObject({color: color, id: ID++}); 
    },
    remove: function() {
      var allSelectedItems = this.get('allSelectedItems').mapBy('content');
      this.get('model').removeObjects(allSelectedItems);
    }
  }
});

controllers.color.js

import Ember from 'ember';

export default Ember.ObjectController.extend({
  isChecked: false,
  
  colorId: function() {
    return 'checkbox' + this.get('id');
  }.property('id'),
  
  registerOnParent: function() {
    this.send('registerToggle', this);
  }.on('init'),
                                                    
  willDestroy: function() {
    this.send('deregisterToggle', this);
  }
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return Ember.A([
      {color: 'red', id: 1},
      {color: 'yellow', id: 2},
      {color: 'blue', id: 3}
    ]);
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

label, input[type=checkbox] {
  cursor: pointer;
}

templates.application.hbs

{{#if model}}
  <p>
  {{input type="checkbox" checked=allChecked id="allchecked" name="allchecked"}}
  <label for="allchecked">Toggle Select All</label>
  </p>

  <ul>
  {{#each model itemController="color"}}
    <li>
      {{input type="checkbox" checked=isChecked id=colorId name=colorId}}
      <label {{bind-attr for=colorId}}>{{model.color}}</label>
    </li>
  {{/each}}
  </ul>
{{else}}
  <strong>Please Add A Color...</strong>
{{/if}}

<hr>
<strong>{{totalSelectedCount}}</strong> currently selected
<hr>

<button {{action 'add'}}>Add New Color</button>
<button {{action 'remove'}}>Remove Selected</button>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "1.12.0",
    "ember-template-compiler": "1.12.0",
    "ember-testing": "1.12.0"
  }
}