Emberのモバイルデバイス向きの変更の対応

Question

私はemberのウェブサイトを携帯電話に対応させることを任されています。問題の1つは、コンポーネントを使用してグラフを描画することです（d3）。親コンテナに変更があった場合、グラフは再描画されません。デスクトップディスプレイではあまり問題にはなりませんが、モバイルでは描画されたグラフはポートレートとランドスケープで大きく異なります。

エバーオブザーバーをウィンドウデバイスの向きを変更するにはどうすればいいですか？jroughか普通の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);