Uncaught: You can't call rerender on a view being destroyed

Question

When I navigate around my app, I often get this error which further destroy all navigation in my app, and I have to reload the whole page:

Uncaught You can't call rerender on a view being destroyed

I, and a couple of the boys on the Ember IRC channel figured out what causes the problem.

It's the group helper from https://github.com/emberjs/group-helper that I use. The whole app is set up to use that, and lots of stuff breaks if I remove it because then a lot of metamorph tags starts to get created yet again.

Any idea how to modify the helper so that the error goes away?

var get = Ember.get, set = Ember.set, EmberHandlebars = Ember.Handlebars;

EmberHandlebars.registerHelper('group', function(options) {
    var data = options.data,
        fn   = options.fn,
        view = data.view,
        childView;

    childView = view.createChildView(Ember._MetamorphView, {
        context: get(view, 'context'),
        template: function(context, options) {
            options.data.insideGroup = true;
            return fn(context, options);
        }
    });

    view.appendChild(childView);
});

Updated: Stuff below is outdated and only there because it was in the original post

In my app, i have these three subclasses, which I base all of my views, array controllers and routes on.

View:

PageView = Ember.View.extend({
    title: '',
    identifier: '',
    classNames: ['page'],
    willDestroyElement: function () {
        var elm_classes = this.$().attr('class') + ' out',
            elm_height = this.$().height(),
            temporary_container = $('<div class="'+elm_classes+'">');

        this.$().children().appendTo(temporary_container);

        temporary_container.insertAfter(this.$());

        window.setTimeout(function() {
            temporary_container.remove();
        }, animationKillDuration);
    },
    didInsertElement: function() {
        $(document).trigger('royalbeer-page-rendered');
    }
});

Array controller

RoyalArrayController = Ember.ArrayController.extend({
    goto: function(route, slug) {
        if (!slug)
            this.transitionToRoute(route);
        else
            this.transitionToRoute(route, slug);
    }
});

Route:

RoyalRoute = Ember.Route.extend({
    setupController: function(controller, model) {
        var modelName = this.routeName.substr(0, 1).toUpperCase() + this.routeName.substr(1),
            slug = model;
        if (model.hasOwnProperty('slug'))
            slug = model.slug;
        controller.set('model', App[modelName].find({'slug': slug}));
    },
    serialize: function(slug, params) {
        var name, object;
        object = {};
        name = params[0];
        object[name] = slug;
        return object;
    }
});

I use the goto function in the array controller to bind elements in my app for navigation with {{action goto 'routename' slug}}, and my serializer and setupController on my route is set up to be able to handle that, which works perfectly until the error occurs.

And I can only guess that it is because of those that the thing breaks.

Any ideas as to what is going on and how to fix it?

Answer 1

I have solved it now by removing the group helper all together and rewritten all my css from using :first-child/:last-child to :first-of-type/:last-of-type. Including Twitter Bootstrap. It works. But I'd really like a way to get Ember to not bloat my DOM with metamorph tags in general.