Skip to content

Instantly share code, notes, and snippets.

@iamdtang
Last active March 23, 2018 07:57
Show Gist options
  • Save iamdtang/5db1999f616689f58c3950390fab6e6c to your computer and use it in GitHub Desktop.
Save iamdtang/5db1999f616689f58c3950390fab6e6c to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
const { Checkbox, computed } = Ember;
export default Checkbox.extend({
attributeBindings: ['checked'],
checked: computed('checkedItemsSet', function() {
return this.get('checkedItemsSet').has(this.get('item'));
}),
didInsertElement() {
console.log('inserted');
},
click(e) {
this.get('onClick')();
}
});
import Ember from 'ember';
const { Component, computed } = Ember;
export default Component.extend({
checkedItemsSet: computed('checkedItems', function() {
return new Set(this.get('checkedItems'));
}),
actions: {
onCheck(item) {
let checkedItemsSet = this.get('checkedItemsSet');
if (checkedItemsSet.has(item)) {
checkedItemsSet.delete(item);
} else {
checkedItemsSet.add(item);
}
this.get('onCheck')(Array.from(checkedItemsSet));
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
init() {
this._super(...arguments);
this.set('items', [
{ firstName: 'Tom' },
{ firstName: 'Yehuda' }
]);
this.set('checkedItems', [
this.get('items.lastObject')
]);
},
actions: {
handleCheck(checkedItems) {
console.log(checkedItems);
this.set('checkedItems', checkedItems);
}
}
});
{{#checkbox-list
items=items
checkedItems=checkedItems
onCheck=(action "handleCheck") as |list|}}
{{list.checkbox}} {{list.item.firstName}}
{{/checkbox-list}}
{{#each items as |item|}}
{{yield (hash
item=item
checkbox=(component "checkbox-list-checkbox"
checkedItemsSet=checkedItemsSet
item=item
onClick=(action "onCheck" item)
)
)}}
{{/each}}
{
"version": "0.13.0",
"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.16.2",
"ember-template-compiler": "2.16.2",
"ember-testing": "2.16.2"
},
"addons": {
"ember-data": "2.16.3"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment