Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save tomwayson/d48aa34f00aca5671c1202a63dd443df to your computer and use it in GitHub Desktop.
Save tomwayson/d48aa34f00aca5671c1202a63dd443df to your computer and use it in GitHub Desktop.
checked attribute binding
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'));
}),
});
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);
});
}
}
});
<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>
<label>
{{input type="checkbox" checked=checked}} {{model.name}} (checked: {{checked}})
</label>
{
"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": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment