Übergeben der Komponentenabmessungen an eine andere verschachtelte Komponente in Ember

Question

Im Layout, an dem ich gerade arbeite (basierend auf dieser fiddle), hängt eine verschachtelte Komponente (die sticky scrollbar) von den Dimensionen der übergeordneten Komponente ab, also überlasse ich diese Dimensionen als Attribute. Etwas wie:

{{!-- Rest of the template --}} 

{{div-scroller 
    width=tracksWidth offset=tracksOffset 
    scrollWidth=tracksScrollWidth scrollLeft=tracksScrollLeft 
    scrollUpdated=(action "updateComponentScroll") }} 

Das Problem ist, dass in Embers Komponente Lebenszyklus, nur die Dimensionen für eine Komponente nach didInsertElement erhalten. Wenn ich versuche, dies zu tun:

didInsertElement(...args) { 
    this._super(args); 

    // Get dimensions 
    this.set("tracksWidth", this.$().width()); 
    this.set("tracksOffset", this.$().offset()); 
    this.set("tracksScrollWidth", this.$().get(0).scrollWidth); 
    this.set("tracksScrollLeft", this.$().scrollLeft()); 
    this.set("lastScrollPosition", this.$().scrollLeft()); 
} 

Ember beklagt, dass ich nicht Objekte im didInsertElement (oder in didRender) aus Leistungsgründen setzen soll.

Gibt es eine andere Möglichkeit, die Dimensionen einer übergeordneten Komponente an eine untergeordnete Komponente zu übergeben?

Answer 1

Sie können dies tun, indem Sie die Setter in Ember.run.later oder Ember.run.scheduleOnce('afterRender',...) verpacken. Übrigens können Sie auch setProperties verwenden.

didInsertElement() { 
    this._super(...arguments); 

    Ember.run.scheduleOnce('afterRender',() => { 
    const self = this.$(); 

    this.setProperties({ 
     tracksWidth: self.width(), 
     tracksOffset: self.offset(), 
     tracksScrollWidth: self.get(0).scrollWidth(), 
     tracksScrollLeft: self.scrollLeft(), 
     lastScrollPosition: self.scrollLeft(), 
    }); 
    }); 
} 

Answer 2

Meiner Meinung nach sollten Sie die Dimension der Eltern nicht an die untergeordnete Komponente übergeben. Es könnte einen Weg geben, das mit CSS zu tun. Auch wenn es mit reinem CSS nicht möglich ist, muss es eine Javascript-Möglichkeit geben, dass jede Komponente nur ihre eigenen Dimensionen kennen sollte. Am Ende müssen Sie keine Daten weitergeben, die Sie unter didRender erhalten. Das ist meine Meinung.

Natürlich müssen Sie manchmal Daten verwenden, die Sie unter didRender hook bekommen. Für diese Anforderungen können Sie Ember Run Loop verwenden. (Wie von Keo bei Kommentaren erwähnt.)