How should I bind to a window function in an Ember View? - ember.js

Question

I have a mixin which automatically recalculates and sets the height of a div on page resize.
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.
Is there a way to bind to window events directly in Ember?
I have a simplified JSFiddle here
This is the code:
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')
)
And the mixin that is calling it.
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)

Answer 1

I know I'm a few years late, but I was looking for a solution to the same problem and found this:
jQuery(window).on('resize', Ember.run.bind(this, this.handleResize));
(source: Ember.js ofiicial)
**** P.S.
About the implementation of this little trick - I don't know if it's possible to use it in a controller method and trigger on init (as denis.peplin commented), I'm actually binding the event in the route's 'setupController' function. I don't know if it's best-practice, but it works like a charm in my app.

Answer 2

There's nothing wrong with registering your own event handler with jQuery for something like this.
Ember doesn't have any window event handling currently.
I'd also suggest trying to come up with a solution that didn't rely on globals.

Answer 3

And sample code for Itay Hamashmid's answer:
App.ApplicationController = Ember.Controller.extend({
handleResize: function() {
console.log('resized');
},
bindResizeEvent: function() {
jQuery(window).on('resize', Ember.run.bind(this, this.handleResize));
}.on('init')
});

Answer 4

I don't think it's possible with Ember.js - the only place where it provides built in DOM event handling is for Ember.View (click etc.) and maybe in other view related classes.
We also used similar approaches to your solution to handle special cases like this!

Answer 5

For the ones who searching by newest answers or just get rid of jquery...
In my case I just want to know if window resized to calc width of element.
import Component from '#ember/component';
export default Component.extend({
size: window.innerWidth,
init() {
this._super(...arguments);
window.addEventListener('resize', ()=> this.set('size', window.innerWidth));
}
});
Yeah, I know there is no way to unbind this kind of anonymous function, but I've searched and I can't find good answers...
I thinking to refactor this to use jquery but in a restricted scope like:
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));
}
});
And this will listener will live until this component lives!