Question

I have a controller managing a list of clients. Each Client is an a DS.Model. The code throws the following exception the moment i set the controller’s content to the the result of App.Client.find() i.e. RecordArray. I get no exception if i set the controller’s content to an empty array [] or when i used Ember.Object instead of DS.Model for the client object

Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM. 

APP.ClientsController = Ember.ArrayController.extend({});

APP.Client = DS.Model.extend({
number:DS.attr('number'),
firstname:DS.attr('string')})


APP.ClientsRoute = Ember.Route.extend({
setupControllers: function(controller) {
    controller.set('clients',APP.Client.find());            
});

APP.store = DS.Store.create({
revision: 11,
adapter: 'DS.FixtureAdapter'     
});

Any idea, i tried debugging the source code, the code is failing when Ember detects a change to the controller’s content and trigger arrayWillChange event

  arrayWillChange: function(content, start, removedCount) {
// If the contents were empty before and this template collection has an
// empty view remove it now.
var emptyView = get(this, 'emptyView');
if (emptyView && emptyView instanceof Ember.View) {
  emptyView.removeFromParent();
}

// Loop through child views that correspond with the removed items.
// Note that we loop from the end of the array to the beginning because
// we are mutating it as we go.
var childViews = get(this, 'childViews'), childView, idx, len;

len = get(childViews, 'length');

var removingAll = removedCount === len;

if (removingAll) {
  this.currentState.empty(this);
}

for (idx = start + removedCount - 1; idx >= start; idx--) {
  childView = childViews[idx];
  if (removingAll) { childView.removedFromDOM = true; }
  childView.destroy();
}

},

Answer 1

Turned out to be an interference with an external script (DatatTable Jquery Plugin) trying to modify the same dom structure ember’s controlling.