insertBefore failed

components.component-a.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.component-b.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.container-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  gridstackOptions: {cellHeight: 10,verticalMargin: 20,float: true},
  
  didInsertElement() {
    Ember.run.scheduleOnce('afterRender', this, function() {
      this._initGridstack();
    });
  },
  
	_initGridstack: function() {
		var options = {
			cellHeight: '',
			verticalMargin: '',
			float: ''
		};

		Ember.$('body').append('<div class="gridstack-vars"></div>');
		Ember.$.each(options, function(key) {
			Ember.$('.gridstack-vars').append('<span class="' + key + '"></span>');
		});
		Ember.$('.gridstack-vars').children('span').each(function() {
			var value;

			value = Ember.$(this).css('font-family').toString().replace(/["']/g, '').trim(); // both '' and "" are needeed for cross-browser compat

			if (!value) {
				value = null;
			}
			options[Ember.$(this).attr('class')] = value;
		});

		this.set('gridstackOptions.cellHeight', 80);
		this.set('gridstackOptions.verticalMargin', 10);
		this.set('gridstackOptions.float', true);

		Ember.$('.gridstack-vars').remove();

      var gridstack = Ember.$('.grid-stack').gridstack(this.get('gridstackOptions'));

			var self = this;

			if(this.get('editModeService.editMode') === false) {
				//Ember.$('#gridstack-' + this.get('id')).data('gridstack').disable(); // disable if not in editMode
			}

			gridstack.on('dragstop', function () {
				self.toggleProperty('gridItemChanged');
			});

			gridstack.on('resizestop', function () {
				self.toggleProperty('gridItemChanged');
			});
	},
  
  observeChildrenChanged: function() {
		Ember.run.scheduleOnce('afterRender', this, function() {
			this._reinitGridstack();
		});
	}.observes('model.componentName'),
  
	_reinitGridstack: function() { //takes int consideration that there might be nested gridstacks
		var containerId = this.get('id');

		var self = this;

		var gridstack = Ember.$('.grid-stack');

		var children = gridstack.children();

		if(this.get('model.boardlets') && this.get('model.boardlets').length === 0) { // if no children, just reinit
			gridstack.gridstack(this.get('gridstackOptions'));
			gridstack.data('gridstack').grid.nodes = []; // cleanup previous state, to make sure insertion starts at (0,0), reinit does not reinit the gridstack model
			return;
		}

		gridstack.wrap('<div class = "gridstack-helper">');
		children.unwrap();

		gridstack = Ember.$('.gridstack-helper');
		gridstack.removeClass('gridstack-helper');
		gridstack.addClass('grid-stack');

		gridstack = Ember.$('.grid-stack').gridstack(this.get('gridstackOptions'));
    debugger;

		if(!this.get('editModeService.editMode')) { // if editMode false deactivate
			if(gridstack && gridstack.data('gridstack')) {
				//gridstack.data('gridstack').disable();
			}
		}

		gridstack.on('dragstop', function () {
			self.toggleProperty('gridItemChanged');
		});

		gridstack.on('resizestop', function () {
			self.toggleProperty('gridItemChanged');
		});
	}
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('sub', { path: 'sub/:id' });
});

export default Router;

routes.sub.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    switch(params.id) {
      case "1":
        return { componentName: 'component-a' };
      case "2":
        return { componentName: 'component-b' }; 
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{#link-to "sub" 1}}/sub/1{{/link-to}}
{{#link-to "sub" 2}}/sub/2{{/link-to}}
{{outlet}}
<br>
<br>

templates.components.component-a.hbs

{{yield}}
a

templates.components.component-b.hbs

{{yield}}
b

templates.components.container-component.hbs

<div class="grid-stack">
	<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
    <div class="grid-stack-item-content">{{component model.componentName}} </div>
  </div>
</div>

templates.sub.hbs

{{container-component model=model}}

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", 
    "lodash": "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js",
    "gridstack": "https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.js",
    "ember": "2.12.0",  
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}