title: How should I bind to a window function in an Ember View?
body: <p>I have a mixin which automatically recalculates and sets the height of a div on  page resize.</p>
  
  <p>It works but it seems silly to me to be binding to a jQuery event and triggering an Ember event manually every time it is called.</p>
  
  <p>Is there a way to bind to window events directly in Ember?</p>
  
  <p>I have a simplified JSFiddle <a href="http://jsfiddle.net/kGhrx/1/" rel="noreferrer">here</a></p>
  
  <p>This is the code:</p>
  
  <pre><code>App.windowWrapper = Ember.Object.create(Ember.Evented,
    resizeTimer: null
    init: -&gt;
      @_super()
      object = this
      $(window).on 'resize', -&gt;
        window.clearTimeout(object.resizeTimer)
        object.resizeTimer = setTimeout( App.windowWrapper.resize, 100)
        true
  
    resize: -&gt;
      App.windowWrapper.fire('resize')
  )
  </code></pre>
  
  <p>And the mixin that is calling it.</p>
  
  <pre><code>App.Scrollable = Ember.Mixin.create
    classNames: "scrollable"
    init: -&gt;
      Ember.assert("Scrollable must be mixed in to a View", this instanceof Ember.View)
      @_super()
  
    didInsertElement: -&gt;
      @_super()
      @calculateHeight()
      App.windowWrapper.on('resize', this, 'calculateHeight')
  
    willDestroyElement: -&gt;
      App.windowWrapper.off('resize', this, 'calculateHeight')
      @_super()
  
    calculateHeight: -&gt;
      offset       = @$().offset().top
      windowHeight = $(window).height()
      @$().css('height', windowHeight - offset)
  </code></pre>