Skip to content

Instantly share code, notes, and snippets.

@mrryanjohnston
Last active February 8, 2019 08:25
Show Gist options
  • Save mrryanjohnston/c4ed7674dd6427eb74cbcc499b404bdf to your computer and use it in GitHub Desktop.
Save mrryanjohnston/c4ed7674dd6427eb74cbcc499b404bdf to your computer and use it in GitHub Desktop.
Delete items with Animation
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
delete () {
this.delete();
}
}
});
import Ember from 'ember';
import { later } from '@ember/runloop';
export default Ember.Component.extend({
didInsertElement() {
this._super(...arguments);
later(() => {
this.$().fadeOut();
this.removeFromDeleted();
}, 1000);
}
});
import Ember from 'ember';
import { computed } from '@ember/object';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
init () {
this._super(...arguments);
this.deleted = [];
},
sort (a, b) {
let nameA = a.record.name.toUpperCase(); // ignore upper and lowercase
let nameB = b.record.name.toUpperCase(); // ignore upper and lowercase
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// names must be equal
return 0;
},
showRecords: computed('model.[]', 'deleted.[]', function() {
let showRecords = this.model.map((r) => {
return { component: 'my-component', record: r }
});
let showDeleted = this.deleted.map((d) => {
return { component: 'my-deleted-component', record: d }
});
return [...showRecords, ...showDeleted].sort(this.sort);
}),
actions: {
addToDeleted (record) {
record.destroyRecord().then(() => this.deleted.push({ name: record.name }));
},
removeFromDeleted (record) {
let index = this.deleted.indexOf(record);
this.deleted.splice(index, 1);
}
}
});
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';
export default Model.extend({
});
import Ember from 'ember';
export default Ember.Route.extend({
model () {
this.store.createRecord('my-model', { name: 'foo' });
this.store.createRecord('my-model', { name: 'bar' });
return this.store.peekAll('my-model');
}
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
<ol>
{{#each showRecords as |showRecord|}}
{{component showRecord.component record=showRecord.record delete=(action "addToDeleted" showRecord.record) removeFromDeleted=(action "removeFromDeleted" showRecord)}}
{{/each}}
</ol>
<br>
<br>
<li>{{record.name}} | <a href="#"{{action "delete"}}>delete</a></li>
<li>{{record.name}} | deleted! </li>
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-data": "3.4.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment