Ember.js 如何绑定到余烬视图中的窗口函数？

我有一个mixin，它可以自动重新计算并设置页面上div的高度

它可以工作，但在我看来，绑定到jQuery事件并在每次调用它时手动触发余烬事件是愚蠢的

有没有办法直接绑定到Ember中的窗口事件

我有一个简化的JSFiddle

代码如下：

App.windowWrapper = Ember.Object.create(Ember.Evented,
  resizeTimer: null
  init: ->
    @_super()
    object = this
    $(window).on 'resize', ->
      window.clearTimeout(object.resizeTimer)
      object.resizeTimer = setTimeout( App.windowWrapper.resize, 100)
      true

  resize: ->
    App.windowWrapper.fire('resize')
)

还有叫它的混血儿

App.Scrollable = Ember.Mixin.create
  classNames: "scrollable"
  init: ->
    Ember.assert("Scrollable must be mixed in to a View", this instanceof Ember.View)
    @_super()

  didInsertElement: ->
    @_super()
    @calculateHeight()
    App.windowWrapper.on('resize', this, 'calculateHeight')

  willDestroyElement: ->
    App.windowWrapper.off('resize', this, 'calculateHeight')
    @_super()

  calculateHeight: ->
    offset       = @$().offset().top
    windowHeight = $(window).height()
    @$().css('height', windowHeight - offset)

---

我认为使用Ember.js是不可能的-它提供内置DOM事件处理的唯一地方是Ember.View（单击等）和其他与视图相关的类

---

我们也使用类似的方法来处理类似的特殊情况

向jQuery注册您自己的事件处理程序并没有什么错

Ember当前没有任何窗口事件处理

---

我还建议尝试提出一种不依赖于全局的解决方案。

我知道我晚了几年，但我一直在寻找解决同一问题的方法，结果发现：

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

（来源：）

****附言。

---

关于这个小把戏的实现——我不知道是否可以在控制器方法中使用它并在init上触发（正如denis.peplin评论的那样），我实际上是在路由的“setupController”函数中绑定事件。我不知道这是否是最佳实践，但它在我的应用程序中就像一个魔咒。

和

Itay Hamashmid

答案的示例代码：

App.ApplicationController = Ember.Controller.extend({
  handleResize: function() {
    console.log('resized');
  },
  bindResizeEvent: function() {
    jQuery(window).on('resize', Ember.run.bind(this, this.handleResize));
  }.on('init')
});

---

对于那些搜索最新答案或只是摆脱jquery的人

在我的例子中，我只想知道窗口是否调整为元素的计算宽度

import Component from '@ember/component';

export default Component.extend({
  size: window.innerWidth,

  init() {
    this._super(...arguments);

    window.addEventListener('resize', ()=> this.set('size', window.innerWidth));
  }
});

是的，我知道没有办法解除这种匿名函数的绑定，但我已经搜索过了，我找不到好的答案

我想重构它以使用jquery，但范围有限，如：

import Component from '@ember/component';
import $ from 'jquery';

export default Component.extend({
  size: window.innerWidth,

  init() {
    this._super(...arguments);

    $(document.querySelector('#something'))
              .on('resize', (e)=> this.set('size', e.target.innerWidth));
  }
});

---

这个监听器将一直存在，直到这个组件存在

如果在注册事件处理程序时使用了胖箭头（

=>

），则不需要

对象=this

。denis.peplin:函数bindResizeEvent在init上调用，但当我更改Chrome浏览器的大小时，该函数不会再次运行。bindResizeEvent的预期行为是，它将在每次调整浏览器窗口的大小时运行（这就是我要寻找的）？是的，绑定后如何解除绑定…？是的，绑定后如何解除绑定。。。？