灰烬动作移动设备方向变化

Question

我一直负责采取一个烬网站，并使其响应移动。其中一个问题是他们使用组件绘制图形（d3）。当父容器发生更改时，图形不会重新呈现。在台式机显示器上并不是什么大问题，但是在移动设备上，绘制的图形在纵向和横向上明显不同。

我想知道是否有一种方法来附加一个窗口设备方向变化的烬观察员，要么通过jquery或常规的JavaScript？

Answer 1

不能完全肯定，如果灰烬有窗口事件迄今处理，但通过jQuery利用resize可能做的伎俩：

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

Answer 2

以下组件演示了如何绑定的窗口中的事件处理程序结合this方面调整以及如何消除沉重的手术。

样品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.   
    }, 
}); 

晴调整事件将频繁触发，从而其更好通过防抖动处理繁重的操作。像下面那样，

Ember.run.debounce(this, this.resizeHeavyOperation, 50);