Расширяемые виды помощника в Ember
Итак, я надеялся, что смогу создать вспомогательное (основное) представление для моего приложения, основная причина в том, что я хочу реализовать 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.
Я почти уверен, что это происходит, потому что я расширяю эту точку зрения, какие-либо идеи о том, почему это происходит или что я должен на самом деле делать?
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);
}
});