Skip to content

Instantly share code, notes, and snippets.

@bgentry
Forked from machty/controllers.application.js
Last active November 22, 2016 01:43
Show Gist options
  • Save bgentry/aca3ae499e543b5d20623f7c8e9d990a to your computer and use it in GitHub Desktop.
Save bgentry/aca3ae499e543b5d20623f7c8e9d990a to your computer and use it in GitHub Desktop.
repro of EC set on destroyed item
import Ember from 'ember';
import { task } from 'ember-concurrency';
const PersonItem = Ember.Component.extend({
person: null,
editMode: false,
changePerson: null,
latestPost: Ember.computed.oneWay('person.latestPost'),
willDestroyElement() {
this._super(...arguments);
console.log('element is getting destroyed');
},
actions: {
startEdit() {
this.set('editMode', true);
}
},
saveEdit: task(function* () {
let cp = this.get('changePerson');
let result = cp();
yield result;
this.set('editMode', false);
})
});
PersonItem.reopenClass({
positionalParams: ['person']
});
export default PersonItem;
import Ember from 'ember';
const { Component, computed, isEmpty } = Ember;
const PersonOuterItem = Component.extend({
person: null, // the device setting object
// changeSetting is a function that takes a SettingChangeRequest as an
// argument, called when trying to apply a setting change.
changePerson: null,
tagName: '', // no tag, this just wraps other components,
componentName: computed('person', () => {
return 'person-item';
}),
willDestroyElement() {
this._super(...arguments);
console.log('parent element is getting destroyed');
}
});
PersonOuterItem.reopenClass({
positionalParams: ['person']
});
export default PersonOuterItem;
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';
export default Ember.Route.extend({
model() {
this.set('n', 0);
let result = Ember.Object.create({
people: [
{id: 1, name: "Blake", latestPost: {id: 5, body: 'foo'}}
]
});
this.set('peopleModel', result);
return result;
},
actions: {
changePerson() {
return this.get('_changePerson').perform();
}
},
_changePerson: task(function * () {
console.log("Waiting...");
yield this.get('updateModel').perform();
console.log("Done");
}),
updateModel: task(function* () {
this.set('n', this.get('n') + 1);
let n = this.get('n');
yield new Ember.RSVP.Promise((resolve, reject) => {
Ember.run.later(500, resolve);
});
this.get('peopleModel').setProperties({
people: [
{id: 1, name: "Blake"+n, latestPost: {id: n+20, body: 'foo'+n}}
]
});
})
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{#each model.people as |person|}}
{{person-outer-item person=person changePerson=(route-action "changePerson")}}
{{/each}}
<br>
<br>
{{#if editMode}}
<h2>Editing {{person.name}}</h2>
<button onclick={{perform saveEdit}}>Save</button>
{{else}}
<h2>Not editing {{person.name}}</h2>
<button {{action "startEdit"}}>Edit</button>
{{/if}}
<p>latest post: {{latestPost.body}}</p>
{{component componentName person changePerson=changePerson}}
{
"version": "0.10.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.9.0",
"ember-template-compiler": "2.9.0"
},
"addons": {
"ember-concurrency": "latest",
"ember-route-action-helper": "2.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment