1

所以，我希望能够为我的应用程序创建一个辅助（主）视图，主要原因是我想实现一个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视图的路线，那么一切正常，直到您在应用程序中导航，然后返回同一路线，我将面临以下错误。

未捕获的错误：您所做的某些事情导致视图在渲染后但在插入 DOM 之前重新渲染。

我很确定这正在发生，因为我正在扩展这种观点，关于为什么会发生这种情况或我实际上应该做什么的任何想法？

4

2 回答 2

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);
    }
});
于 2013-11-21T23:46:10.067 回答
1

这听起来像是一个非常适合 ember mixin 的功能。该解决方案将提供更大的灵活性，然后您可以扩展其他视图并提供调整大小功能......

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

于 2013-11-22T00:16:32.873 回答