如何在Ember组件中正确解除绑定jQuery窗口事件处理程序

Question

我知道使用jQuery将事件处理程序绑定到window事件的best practice是

jQuery(window).on('resize', Ember.run.bind(this, this.handleResize));

如果您尝试在willDestroyElement中使用

取消绑定事件处理程序

$(window).off('resize', this.handleResize);

这不起作用，因为.on()和.off()必须使用与处理函数完全相同的引用来调用。

但以下情况也不起作用：

$(window).off('resize', Ember.run.bind(this, this.handleResize));

所以我可以考虑的唯一选择是确保在销毁组件后不调用我的事件处理程序是这样的：

willDestroyElement: function () {
  this.set('handleResize', null);
}

...正如this stackoverflow question中所建议的那样。但这并不是一个真正的解除束缚。有什么建议吗？

Answer 1

您的选择是命名事件，如下所示：

jQuery(window).on('resize.handleResize', Ember.run.bind(this, this.handleResize));

然后使用：

$(window).off('resize.handleResize');

取消绑定事件（不提供功能）。以下是有关事件命名空间的更多信息：https://css-tricks.com/namespaced-events-jquery/

另一种方法是保存对函数的引用，如下所示：

...
this.set('boundResizeHandler', Ember.run.bind(this, this.handleResize))
jQuery(window).on('resize', this.get('boundResizeHandler'));
...

然后解开它：

$(window).off('resize', this.get('boundResizeHandler')

至于为什么$(window).off('resize', Ember.run.bind(this, this.handleResize));没有效果。每次拨打Ember.run.bind(this, this.handleResize)时，都会创建一个新功能。因此，您在拨打$(window).on(...)时提供的功能与您拨打$(window).off(...)时提供的功能不同，这就是它无法工作的原因（这也是您必须保存的功能）参考您在致电$(window).on(...)时提供的执行功能。