Ember 액션 모바일 장치 방향 변경

Question

나는 엠버 웹 사이트를 모바일에 응답하도록 지정했습니다. 문제 중 하나는 구성 요소를 사용하여 그래프를 그리는 것입니다 (d3). 그래프는 부모 컨테이너에 변경이있을 때 렌더링되지 않습니다. 데스크톱 디스플레이에서는별로 문제가되지 않지만, 모바일에서는 그려진 그래프가 세로와 가로가 크게 다릅니다.

에버 관찰자를 창 장치 방향 변경에 연결하는 방법이 있다면 궁금합니다. jrough 또는 일반 자바 스크립트를 사용 하시겠습니까? 엠버는 지금까지 처리 윈도우 이벤트를 가지고 있지만, jQuery를 통해 resize를 사용하는 트릭을 할 수있는 경우

Answer 1

완전히 확실하지 : 구성 요소 아래의 창에 대한 이벤트 처리기가 this 컨텍스트를 바인딩 크기를 결합하는 방법을 보여줍니다

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

무거운 조작에 대해 논쟁하는 방법.

샘플 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);