checked attribute binding

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  checked: Ember.computed('model.id', 'itemsToAdd.[]', function () {
    const itemsToAdd = this.get('itemsToAdd');
    return !!itemsToAdd.findBy('id', this.get('model.id'));
  }),
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  model: { name: 'this one works if you click the label but not if you click the checkbox', id: 'my-id' },
  otherModel: { name: 'this one works regardless of where you click', id: 'my-other-id' },
  
  itemsToAdd: [],
  
  checkIt (item) {
    const itemsToAdd = this.get('itemsToAdd');
    const existingObj = itemsToAdd.findBy('id', item.id);
    if (!existingObj) {
      itemsToAdd.pushObject(item);
    } else {
      itemsToAdd.removeObject(existingObj);
    }
  },
  
  actions: {
    checkIt (item) {
      this.checkIt(item);
  	},
    checkItWithRun (item) {
      Ember.run.next(this, () => {
        this.checkIt(item);
      });
  	}
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{my-component model=model itemsToAdd=itemsToAdd checkIt=(action 'checkIt')}}
{{my-component model=otherModel itemsToAdd=itemsToAdd checkIt=(action 'checkItWithRun')}}
<br>
<br>

templates.components.my-component.hbs

<label {{action checkIt model}}>
	{{input type="checkbox" checked=checked}} {{model.name}} (checked: {{checked}})
</label>

twiddle.json

{
  "version": "0.11.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": "2.11.0",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.11.0",
    "ember-testing": "2.11.0"
  },
  "addons": {}
}