Question

I have an Ember application with a sidebar with a variable number of widgets in it. I’m using Ember.ContainerView to store the widget views.

Populating the container view works just fine (all the widgets are rendered as they should).

The problem is that when I want to update the ContainerView (because the application state changes, new widgets should be loaded), the current childViews cannot be removed… If I call view.removeChild(child) and child.remove() for every childView, only a few actually get removed.

I think this has something to do with Ember updating the DOM for every remove() call but I can’t figure it out. I’ve also tried just using this.set('childViews',[]) instead of removing each view individually but that breaks the entire view.

Am I missing something here?

Code:

    // Clear current views
    this.get('childViews').forEach(function(_view) {
        view.removeChild(_view);
        _view.remove();
    });

    var view = this,
        childViews = this.get('childViews');

    // Create new views
    this.get('controller.content').forEach(function (widgetData) {
        childViews.pushObject(App.WidgetView.create({
           controller: App.WidgetController.create(widgetData),
           ...
        })
    });

Answer 1

There is a removeAllChildren method on Em.ContainerView:

http://emberjs.com/api/classes/Ember.ContainerView.html#method_removeAllChildren

this.removeAllChildren() should do the trick.