Ember Aktion zur Änderung der Ausrichtung der Mobilgeräte

Question

Ich habe die Aufgabe, eine Ember-Website zu erstellen und sie so auf Mobilgeräte ansprechbar zu machen. Eines der Probleme ist, dass sie eine Komponente verwenden, um ein Diagramm (d3) zu zeichnen. Das Diagramm wird nicht erneut gerendert, wenn eine Änderung am übergeordneten Container vorgenommen wurde. Auf einem Desktop-Display ist das nicht wirklich ein Problem, aber auf Mobilgeräten unterscheidet sich das gezeichnete Diagramm drastisch zwischen Hoch- und Querformat.

Ich frage mich, ob es eine Möglichkeit gibt, einen Ember Observer an einer Fensterausrichtung der Geräte anzuschließen, entweder durch jquery oder normales Javascript?

Answer 1

Nicht ganz sicher, ob Ember Fenster Ereignis hat bisher arbeiten, sondern resize über jQuery nutzen könnte den Trick tun:

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

Die folgenden Komponenten zeigen, wie ein Event-Handler mit Bindung this Kontext der Größe für Fenster binden und wie man eine schwere Operation entlockt.

Probe 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.   
    }, 
}); 

die Größe Meistens Ereignis häufig wird ausgelöst, so ist es besser, schwere Operation durch debounce zu handhaben. wie der folgende,

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