Ember对移动设备方向的操作更改

我的任务是使用一个ember网站并使其对移动设备做出响应。 其中一个问题是他们使用一个组件来绘制图形（d3）。 当父容器发生更改时，不会重新呈现图形。 在桌面显示器上并没有太多问题，但在移动设备上，绘制的图形在纵向和横向之间是截然不同的。

我想知道是否有办法在窗口设备方向更改上附加一个余烬观察者，无论是通过jquery还是常规的javascript？

Answer 1

不完全确定Ember到目前为止是否有窗口事件处理，但是通过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

下面的Component显示了如何绑定窗口大小调整的事件处理程序以及绑定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. }, }); 

大多数resize的事件会频繁发生，因此通过去抖动处理重型操作会更好。 如下，

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