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-rendered when there is a change on the parent container. Not really much of a problem on a desktop display, but on mobile the drawn graph is drastically different between portrait and landscape.

I'm wondering if there is a way to attach an ember observer on a window device orientation change, either hrough jquery or regular javascript?

回答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'));
}

回答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

import Ember from 'ember';

export default Ember.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 function
        Ember.$(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);

来源：https://stackoverflow.com/questions/39579136/ember-action-on-mobile-device-orientation-change