Question

在我正在处理的布局中（基于此fiddle），嵌套组件（粘性滚动条）取决于父组件的维度，因此我将这些维度作为属性传递下来。类似的东西：

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

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

问题在于，在Ember的组件生命周期中，您只能在didInsertElement之后获取组件的维度。如果我尝试这样做：

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抱怨我出于性能原因不应在didInsertElement（或didRender）中设置属性。

是否有其他方法可以将父组件的维度传递给子组件？

Answer 1

您可以将设置者包装到Ember.run.later或Ember.run.scheduleOnce('afterRender',...)中。顺便说一句，你也可以使用setProperties。

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

在我看来，您不应该将父级的维度传递给子组件。用css可能有办法做到这一点。即使不可能使用纯css，也必须有一种javascript方式，每个组件应该只知道它自己的维度。最后，您不必传递didRender挂钩所获得的数据。这是我的意见。

当然，有时您可能需要使用didRender挂钩时获得的数据。对于这些要求，您可以使用Ember Run Loop。（正如Keo在评论中提到的那样。）

将组件的尺寸向下传递到Ember中的另一个嵌套组件

2 个答案: