Issue undo/redo

adapters.application.js

import DS from 'ember-data';

export default DS.Adapter.extend(DS.BuildURLMixin, {
	defaultSerializer: '-rest',
  
  deleteRecord: function() {return true}
});

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  numberOfItems: Ember.computed.alias('items.length')
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
    appName: 'Ember Twiddle',
    store: Ember.inject.service(),

    pushOnInit: Ember.on('init', function() {
			this.loadRecords();
    }),
  
    loadRecords: function() {
    
        this.get('store').push({
            "data": {
                "id": "children1",
                "type": "child",
                "attributes": {
                    "name": "My Child 1",
                    "master": "parent-folder"
                },
                "relationships": {
                    "master": {
                        "data": {
                            "type": "parent", "id": "parent-folder"
           							}
      							}
    						}
            }
        });
      
        this.get('store').push({
            "data": {
                "id": "parent-folder-2",
                "type": "parent",
                "attributes": {
                    "name": "My Folder 2",
                    "master": "parent-folder"
                },
                "relationships": {
                    "master": {
                        "data": {
                            "type": "parent", "id": "parent-folder"
           							}
      							}
    						}
            }
        });
        this.get('store').push({
            "data": {
                "id": "parent-folder",
                "type": "parent",
                "attributes": {
                    "name": "My Folder 1"
                }
            }
        });
    },
  
    actions: {
    	deleteAndReload: function() {
        var parent = this.get('store').peekRecord('parent', 'parent-folder');
        
      	 //this.get('store').peekAll('parent').forEach(function(parent) {
         		
           parent.deleteRecord();
         		parent.save();
           
           Ember.run.later(function() {
           	this.get('store').unloadRecord(parent);
           }.bind(this));
        // }.bind(this));
      	Ember.run.later(function() {
        this.loadRecords();
        }.bind(this), 2000);
      },
      
      unloadFolder2: function() {
        	console.log(this.get('store').peekRecord('parent', 'parent-folder').get('items.length'));
				var parent = this.get('store').peekRecord('parent', 'parent-folder-2');
        this.get('store').unloadRecord(parent);
        
        	console.log(this.get('store').peekRecord('parent', 'parent-folder').get('items.length'));
        
      }
      
    }
});

models.base.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  master: DS.belongsTo('parent', { inverse: 'items' }),
  modelName: Ember.computed.alias('constructor.modelName')
});

models.child.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import Base from "./base";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Base.extend({
  name: attr('string')
});

models.parent.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import Base from "./base";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Base.extend({
  name: attr('string'),
  items: DS.hasMany('base', { inverse: 'master', async: true }),
  folders: Ember.computed.filterBy('items', 'modelName', 'parent'),
  
  observ: Ember.observer('items', 'items.length', function() {
		
			if (this.get('items.firstObject') === null) debugger;
			console.log('MODEL!', this.get('items.length'));

	}),
  
	deleteRecord: function(recursive) {
		var result;
		
		this.get('items').forEach(function(children) {
			
				children.deleteRecord(true);
				children.save();
				Ember.run.later(function() {
					this.get('store').unloadRecord(this);
				}.bind(this));
			
		}.bind(this));

			result = this._super.apply(this, arguments);


		if (recursive) {
			//this.get('store').unloadRecord(this);
		}
		
		return result;
	},
  
});

routes.application.js

import Ember from 'ember';
import DS from 'ember-data';

DS.RootState.deleted.inFlight.unloadRecord = function(internalModel) {};
DS.RootState.deleted.inFlight.pushedData = function(internalModel) {};
DS.RootState.deleted.inFlight.deleteRecord = function(internalModel) {};

export default Ember.Route.extend({
  	model(params) {
		return Ember.RSVP.hash({
			parents: this.store.peekAll('parent'),
			children: this.store.peekAll('child')
		});
	}
});

serializers.application.js

import Ember from 'ember';
import DS from 'ember-data';

export default DS.RESTSerializer.extend({
	extractRelationship: function (relationshipModelName, relationshipHash) {
		// Compatibility with Pidoco legacy app
		if (relationshipHash === '') {
			return null;
		} else {
			return this._super.apply(this, arguments);
		}
	},
	
	attrs: {
		isCutable: { serialize: false },
		isCopyable: { serialize: false },
		listSortColumnAttribute: { serialize: false },
		containerListSortColumnValue: { serialize: false }
	},
	
	nonSerializedAttributes: Ember.computed('attr', function() {
		var result = [];
		for (let name in this.attrs) {
			if (!this.attrs[name].serialize) {
				result.push(name);
			}
		}
		return result;
	})
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
{{model.parents.length}}
<br>
<ul>
{{#each model.parents as |parent|}}
	{{my-component item=parent items=parent.folders}}
{{/each}}

</ul>
<br>

<button onclick={{action 'deleteAndReload'}}>Delete and reload</button>
<button onclick={{action 'unloadFolder2'}}>Unload folder 2</button>

templates.components.my-component.hbs

<li>{{item.name}} ({{numberOfItems}})</li>
<ul>
	{{#each items as |child|}}
		{{my-component item=child items=child.folders}}
	{{/each}}
</ul>

twiddle.json

{
  "version": "0.12.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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}