Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save weedgrease/7b183be91832c787cd0e782021cab8e7 to your computer and use it in GitHub Desktop.
Save weedgrease/7b183be91832c787cd0e782021cab8e7 to your computer and use it in GitHub Desktop.
Indeterminate/Checked Inputs in Ember
import Ember from 'ember';
import _ from "lodash";
const { computed, get, set } = Ember;
export default Ember.Component.extend({
items: [],
allItems: computed.alias('items'),
selectedItems: [],
allItemsSelected: computed('allItems.length', 'selectedItems.length', function(){
return get(this, 'allItems').length === get(this, 'selectedItems').length;
}),
someItemsSelected: computed('allItems.length', 'selectedItems.length', function(){
return get(this, 'selectedItems').length > 0;
}),
actions: {
toggleAllItems: function(){
let allSelected;
if (get(this, 'someItemsSelected')){
set(this, 'selectedItems', []);
allSelected = false;
} else {
set(this, 'selectedItems', get(this, 'allItems'));
allSelected = true;
}
let $el = this.$('.checkbox');
if (allSelected) {
$el.prop('checked', true);
} else {
$el.prop('checked', false);
}
},
selectItem: function(item){
let selectedItems = get(this, 'selectedItems').toArray();
if (selectedItems.includes(item)) {
set(this, 'selectedItems', _.without(selectedItems, item));
} else {
set(this, 'selectedItems', _.union(selectedItems, [item]));
}
}
},
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
items: [ {name: 'milk'}, {name: 'eggs'}, {name: 'cheese'} ]
});
<h1>My Grocery List</h1>
<br>
{{my-component items=items}}
<br>
<br>
To recreate this bug:
<ul>
<li> Select one or more items </li>
<li> Uncheck them - note that the total count and checkbox reset correctly to 0</li>
<li> Select one or more items (not all three) and note 'allItemsSelected' is false </li>
<li> Check the indeterminate checkbox to unselect all items</li>
<li> Note that even though 'allItemsSelected' is false, the checkbox is selected</li>
</ul>
{{input
class="checkbox"
type="checkbox"
checked=allItemsSelected
indeterminate=(xor allItemsSelected someItemsSelected)
change=(action "toggleAllItems")}}
{{selectedItems.length}} of {{allItems.length}}
( allItemsSelected == {{allItemsSelected}})
<br>
{{#each items as |item|}}
<div>
<input
type="checkbox"
checked={{contains item selectedItems}}
onchange={{action "selectItem" item}}>
{{item.name}}
</div>
<br>
{{/each}}
{
"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": "2.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0"
},
"addons": {
"ember-data": "2.12.1",
"ember-composable-helpers": "1.1.3",
"ember-lodash": "4.17.4",
"ember-truth-helpers": "1.3.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment