Skip to content

Instantly share code, notes, and snippets.

@mrryanjohnston
Last active February 8, 2019 17:53
Show Gist options
  • Save mrryanjohnston/d35dde9e0ac39ebc5e877168ab63f425 to your computer and use it in GitHub Desktop.
Save mrryanjohnston/d35dde9e0ac39ebc5e877168ab63f425 to your computer and use it in GitHub Desktop.
Proxy Array with Record Fadeout
import Ember from 'ember';
import { copy } from '@ember/object/internals';
import { later } from '@ember/runloop';
import { set } from '@ember/object';
export default Ember.Component.extend({
didReceiveAttrs () {
this._super(...arguments);
if (!this.recordsProxy) {
this.recordsProxy = copy(this.records);
return;
}
let newRecordsProxy = copy(this.recordsProxy);
this.records.forEach((record, index) => {
if (this.recordsProxy.indexOf(record) === -1) {
newRecordsProxy.push(record);
}
});
this.set('recordsProxy', newRecordsProxy);
},
actions: {
removeRecord (record) {
this.removeRecord(record);
set(record, 'deleted', true);
later(() => {
this.$(`li:contains(${record.id} | Deleted!)`).fadeOut();
let index = this.recordsProxy.indexOf(record);
this.recordsProxy.splice(index, 1);
}, 3000);
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
init () {
this._super(...arguments);
this.records = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]
},
nextId: 5,
actions: {
addRecord () {
this.records.addObject({ id: this.nextId++ });
},
addRecordRebuildArray () {
this.set('records', [...this.records, { id: this.nextId++ }]);
},
removeRecord (record) {
this.records.removeObject(record);
}
}
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
<h2>Proxied records:</h2>
{{proxy-list records=records removeRecord=(action "removeRecord")}}
<h2>Records:</h2>
<button {{action 'addRecord'}}>Add Record ( will not update the proxied list )</button>
<button {{action 'addRecordRebuildArray'}}>Add Record to new Array ( WILL update the proxied list )</button>
{{#each records as |record|}}
<li>{{record.id}}</li>
{{/each}}
<br>
<br>
{{#each recordsProxy as |record|}}
<li>{{record.id}} | {{#if record.deleted}}Deleted!
{{else}}
<a href="#" {{action "removeRecord" record}}>Delete</a>
{{/if}}
</li>
{{/each}}
{
"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