"Cannot call method 'destroy' of undefined" in arrayWillChange

3
votes

I have what I think is a pretty standard array/template relationship setup, but when I push a new item into the array I get the above mentioned Cannot call method 'destroy' of undefined error in the arrayWillChange method of the Ember source: 

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

I have never had this issue before. This doesn't happen when I remove an item from the array. Only on addition. Below is a link for a JSBin where I tried to duplicate the issue. The error doesn't get thrown but the template doesn't update either.

http://jsbin.com/asemul/2

1
ember.js

1 Answers

6
votes

EDIT:

You're calling array.push instead of array.pushObject -- the latter is an Ember.js method that is binding aware, which means it will automatically update bindings for you. The handlebars template helper {{#each filters}} is a binding to the filters array of the controller, and the template needs to know to update when the underlying array is updated. push doesn't tell the binding to update, but pushObject does.

Here's a working example (all I did was change push to pushObject): http://jsbin.com/asemul/6/

This is a pretty common mistake -- usually, I find that if my templates aren't synchronized with the underlying object, it's because something's wrong with the bindings, so that's where I start looking.

END EDIT

  1. I don't think you should be setting removedFromDOM directly -- try using childView.remove() followed by destroy().
  2. I'm not sure what the context is, but have you looked at ContainerView or CollectionView? Both of those views have support for arrays of child views and may accomplish what you're looking to do both more robustly and with less code.