Skip to content

Instantly share code, notes, and snippets.

@gmarquet
Last active December 15, 2016 12:20
Show Gist options
  • Save gmarquet/a93e63361f31383ed708e10f5885571c to your computer and use it in GitHub Desktop.
Save gmarquet/a93e63361f31383ed708e10f5885571c to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
export default Ember.Component.extend({
data: [],
selectedRecords: [],
actions: {
selectAll() {
this.get('selectedRecords').addObjects(this.get('data'));
} ,
selectNone() {
this.get('selectedRecords').clear();
},
selectRecord(record){
this.get('selectedRecords').addObject(record);
},
removeRecord(record){
this.get('selectedRecords').removeObject(record);
},
}
});
import Ember from 'ember';
export default Ember.Component.extend({
isSelected: Ember.computed('selectedRecords.@each', 'record', function(){
return this.get('selectedRecords').includes(this.get('record'));
}),
actions: {
sendSelect(){
if(this.get('isSelected')){
this.get('onUnselected')();
}else{
this.get('onSelected')();
}
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
});
import Ember from 'ember';
export default Ember.Route.extend({
model(){
return [
{ id: 1, name: 'jack'},
{ id: 2, name: 'jane'},
{ id: 3, name: 'donald'}
];
}
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{data-table data=model}}
<table>
<a href="#" {{action "selectAll"}}>Select All</a>
<a href="#" {{action "selectNone"}}>Select None</a>
{{#each data as |record|}}
<tr>
<td>
{{record-checkbox
record=record
selectedRecords=selectedRecords
onSelected=(action 'selectRecord' record)
onUnselected=(action 'removeRecord' record)
}}
</td>
<td>{{record.id}}</td>
<td>{{record.name}}</td>
</tr>
{{/each}}
</table>
{{selectedRecords}}
{{isSelected}}
<input type="checkbox" checked={{isSelected}} {{action "sendSelect" on="change"}} />
{
"version": "0.10.6",
"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.9.0",
"ember-data": "2.9.0",
"ember-template-compiler": "2.9.0",
"ember-testing": "2.9.0"
},
"addons": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment