Расширяемые виды помощника в Ember

Question

Итак, я надеялся, что смогу создать вспомогательное (основное) представление для моего приложения, основная причина в том, что я хочу реализовать resize функция.

Пример.

App.View = Ember.View.extend({
    init: function() {
       $(window).resize(this.resize.bind(this));
       this._super();
    }
});

А затем расширить его

App.AmazingView = App.View.extend({
   resizing: false,
   resize: function() {
     this.set('resize', true);
   }
});

Итак, это пример того, чего я хотел достичь, но, к сожалению, это вызывает некоторые проблемы.

Если я пойду к маршруту, который использует Amazing посмотри потом все работает нормально, только пока вы не переместитесь по приложению после и затем вернетесь по тому же маршруту, я столкнусь со следующей ошибкой.

Uncaught Error: Что-то, что вы сделали, заставило представление повторно выполнить рендеринг после его рендеринга, но до его вставки в DOM.

Я почти уверен, что это происходит, потому что я расширяю эту точку зрения, какие-либо идеи о том, почему это происходит или что я должен на самом деле делать?

Answer 1

Это звучит как особенность, которая идеально вписалась бы в тёмный миксин. Это решение обеспечит большую гибкость, тогда вы сможете расширить другие представления, а также предоставить функции изменения размера...

http://emberjs.com/api/classes/Ember.Mixin.html

Answer 2

Когда вы делаете $(window).resize(this.resize.bind(this)); вы прикрепляете событие, не управляемое для ember. Когда вы покидаете представление, переходя на другой маршрут, ember очистит прослушиватели событий и уничтожит представление. Теперь ваша точка зрения находится в "мертвом" состоянии. Но обработчик изменения размера все еще присутствует, и когда он срабатывает, изменение выполняется в мертвом представлении. Я думаю, что это вызывает вашу проблему.

Вы можете использовать didInsertElement и willClearRender для привязки и отмены привязки вашего события.

App.View = Ember.View.extend({
    _resizeHandler: null,
    didInsertElement: function() {
       this._super();
       // we save the binded resize function to keep the identity, so unbind will remove
       this._resizeHandler = this.resize.bind(this);
       $(window).bind('resize', this._resizeHandler);
    },
    willClearRender: function() {
       this._super();
       $(window).unbind('resize', this._resizeHandler);
    }
});