移動設備方向改變的 Ember Action

Question

我的任務是創建一個 ember 網站並使其響應移動設備。 問題之一是他們使用組件來繪制圖形（d3）。 當父容器發生更改時，不會重新渲染圖形。 在桌面顯示器上並不是什么大問題，但在移動設備上繪制的圖形在縱向和橫向之間有很大的不同。

我想知道是否有辦法通過 jquery 或常規 javascript 在窗口設備方向更改上附加 ember 觀察者？

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

下面的組件顯示了如何通過綁定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);