Skip to content

Instantly share code, notes, and snippets.

@cbou
Forked from lsg-braymon/controllers.application.js
Created September 26, 2019 05:27
Show Gist options
  • Save cbou/49106ea0c61dde6afce185fa4f6c4328 to your computer and use it in GitHub Desktop.
Save cbou/49106ea0c61dde6afce185fa4f6c4328 to your computer and use it in GitHub Desktop.
Unload record error
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
import Ember from 'ember';
export default Ember.Controller.extend({
mainGroup: Ember.computed('model', function() {
return this.model.filter(function(group){
return group.group === null;
});
}),
actions: {
onCreateGroup: function(item) {
const newGroup = this.store.createRecord('group');
newGroup.setProperties({
name: 'New Group',
group: item.group
});
item.set('group', newGroup);
},
onUnloadItem: function(item) {
item.unloadRecord();
}
}
});
export default function() {
this.get('/groups', function(){
return {
data: [
{
id: '1',
type: 'groups',
attributes: {
name: 'Main Group'
},
relationships: {
items: {
data: [
{ type: 'items', id: 'item-1' },
{ type: 'items', id: 'item-2' },
{ type: 'items', id: 'item-3' },
]
}
}
}
],
included: [
{
id: 'item-1',
type: 'items',
attributes: { name: 'Item 1' }
},
{
id: 'item-2',
type: 'items',
attributes: { name: 'Item 2' }
},
{
id: 'item-3',
type: 'items',
attributes: { name: 'Item 3' }
}
]
}
})
};
import { JSONAPISerializer } from 'ember-cli-mirage';
export default JSONAPISerializer;
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';
export default Model.extend({
name: attr('string'),
group: belongsTo('group', { async: false, inverse: 'groups' }),
items: hasMany('item', { async: false }),
groups: hasMany('group', { async: false, inverse: 'group' })
});
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';
export default Model.extend({
name: attr('string'),
group: belongsTo('group', { async: false })
});
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.findAll('group');
}
});
{{outlet}}
<h1>Unload Record Error</h1>
<h3>Model setup:</h3>
<ol>
<li>
Group
<ul>
<li>belongs to group</li>
<li>has many groups</li>
<li>has many items</li>
</ul>
</li>
<li>
Item
<ul>
<li>belongs to group</li>
</ul>
</li>
</ol>
<h3>Steps to replicate:</h3>
<ol>
<li>
Click "Create New Group" for Item 1. This will create a sub-group under Group 1 named New Group. Item 1 will now be a child of New Group.
</li>
<li>
Click "Unload Item" for Item 3. Notice that Item 1 is displayed twice, under both Group 1 and New Group.
</li>
</ol>
Note that this bug can be reproduced for any Item under Group 1.
<ul>
{{#each mainGroup as |group|}}
<li>
{{group.name}}
<ol>
{{#each group.groups as |subGroup|}}
<li>
{{subGroup.name}}
<ol>
{{#each subGroup.items as |item|}}
<li>
{{item.name}}
</li>
{{/each}}
</ol>
</li>
{{/each}}
{{#each group.items as |item|}}
<li>
{{item.name}}
<button type="button" onclick={{action (action 'onCreateGroup' item)}}>Create New Group</button>
<button type="button" onclick={{action (action 'onUnloadItem' item)}}>Unload Item</button>
</li>
{{/each}}
</ol>
</li>
{{/each}}
</ul>
{
"version": "0.15.1",
"ENV": {
"ember-cli-mirage": {
"enabled": true
}
},
"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.13.2",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-data": "3.13.1",
"ember-cli-mirage": "0.4.14"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment