Question

我的任务是使用一个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.        
    },
});

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

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

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

2 个答案: