ember.js - tutorial - emberjs api docs

Uncaught: no se puede llamar a rerender en una vista que se destruye

Question

Cuando navego por mi aplicación, a menudo obtengo este error que destruye aún más toda la navegación en mi aplicación, y tengo que volver a cargar toda la página:

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

Yo, y un par de chicos en el canal IRC de Ember descubrieron cuál es la causa del problema.

Es el asistente de grupo de https://github.com/emberjs/group-helper que uso. Toda la aplicación está configurada para usar eso, y muchas cosas se rompen si la elimino porque entonces muchas etiquetas metamorph comienzan a crearse nuevamente.

¿Alguna idea de cómo modificar el helper para que desaparezca el error?

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);
});

Actualizado: las cosas a continuación están desactualizadas y solo están allí porque estaban en la publicación original

En mi aplicación, tengo estas tres subclases, en las cuales baso todas mis vistas, controladores de array y rutas.

Ver:

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'');
    }
});

Controlador de matriz

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

Ruta:

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;
    }
});

Utilizo la función goto en el controlador de array para vincular elementos en mi aplicación para la navegación con {{action goto ''routename'' slug}} , y mi serializador y setupController en mi ruta están configurados para poder manejar eso, lo cual funciona perfectamente hasta que ocurra el error.

Y solo puedo adivinar que es por eso que la cosa se rompe.

¿Alguna idea sobre qué está pasando y cómo solucionarlo?

Answer 1

Lo he resuelto ahora quitando el helper del grupo y reescribí todo mi CSS de usar: first-child /: last-child to: first-of-type /: last-of-type. Incluyendo Twitter Bootstrap. Funciona. Pero realmente me gustaría una manera de hacer que Ember no hinche mi DOM con etiquetas de metamorfosis en general.