Skip to content Skip to sidebar Skip to footer

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"