Ember Action On Mobile Device Orientation Change
I've been tasked with taking an ember website and making it responsive to mobile. one of the problems is that they use a component to draw a graph (d3). the graph is not re-rendere
Solution 1:
Not completely sure if Ember has window event handling thus far, but utilizing resize
via jQuery might do the trick:
resizeHandler: function() {
//execute re-render
},
init: function() {
this._super(...arguments);
$(window).on('resize', this.get('resizeHandler'));
},
willDestroy: function() {
this._super(...arguments);
$(window).unbind('resize', this.get('resizeHandler'));
}
Solution 2:
The below Component shows how to bind an event handler for window resize with binding this
context and how to debounce a heavy operation.
Sample Ember-Twiddle
importEmberfrom'ember';
exportdefaultEmber.Component.extend({
_resizeListener: null, //handler for resize event.didInsertElement() {
this._super(...arguments);
this._resizeListener = Ember.run.bind(this, this.resizeHandler); //bind this component context and get the functionEmber.$(window).on('resize', this._resizeListener); //register function to be called on resize
},
willDestroy() {
this._super(...arguments);
Ember.$(window).off('resize', this._resizeListener);
},
resizeHandler() {
//you can write your logic specific to resize stuff.
},
});
Mostly resize event will fire frequently so its better to handle heavy operation through debounce. like the below,
Ember.run.debounce(this, this.resizeHeavyOperation, 50);
Post a Comment for "Ember Action On Mobile Device Orientation Change"