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视图的路线，那么一切正常，直到您在应用程序之后导航然后返回到我面对的同一路线跟随错误。

未捕获错误：您执行的某些操作导致视图在呈现后但在插入DOM之前重新呈现。

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

Answer 1

当您执行$(window).resize(this.resize.bind(this));时，您附加的事件不是为ember管理的。当您离开视图，转换到其他路径时，ember将清理事件侦听器并销毁视图。现在你的观点处于“死”状态。但是resize处理程序仍然存在，当它触发时，会在死视图中执行更改。我认为这会导致你的问题。

您可以使用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);
    }
});

Answer 2

这个声音就像一个完美融入余烬mixin的功能。此解决方案将提供更大的灵活性，然后您可以扩展其他视图并提供调整大小功能......

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

在ember中的可扩展帮助器视图

2 个答案: