javascript - Ember 组件忽略高度/溢出

Question

我正在尝试制作一个 ember 组件，它会在加载时滚动到其自身的底部(它是聊天窗口的 View )

我得到了组件:

从“ember”导入 Ember；

export default Ember.Component.extend({
  didRender() {
    const el = this.$('.chat-window');
    el.scrollTop(el[0].scrollHeight);
  }
});

然后是组件hbs文件

<div class="chat-window">
    {{yield}}
</div>

然后是模板 View

  {{#chat-window}}
    {{chat-message username="John Doe" message="Blah Blah Blah" dispic="http://www.proirrigationwi.com/images/unknown_user.png"}}
    {{chat-message username="John Doe" message="Blah Blah Blah" dispic="http://www.proirrigationwi.com/images/unknown_user.png"}}
    {{chat-message username="John Doe" message="Blah Blah Blah" dispic="http://www.proirrigationwi.com/images/unknown_user.png"}}
  {{/chat-window}}

如果我替换 {{#chat-window}} {{/chat-window}}

与

<div class="chat-window"></div>

一切正常

但是如果我尝试使用该组件，溢出将被忽略并且聊天消息会离开屏幕而不会滚动。任何信息都将非常感谢。

聊天窗口的 CSS

.chat-window {
  height: 75%;
  width: 100%;
  overflow: scroll;
  word-wrap: break-word;
}

预览:

如果我像上面说的那样用纯 html 替换组件，它将停止并且溢出按预期工作

Answer 1

由于某些原因，似乎直接在组件内使用 class="chat-window" 不起作用。

但是当我这样做的时候

{{#chat-window class="chat-window"}} 

一切正常