Ember组件忽略高度/溢出

Question

我试图制作一个ember组件，当它被加载时会滚动到它自己的底部（它是聊天窗口的视图）

我得到了组件：

从＆＃39; ember＆＃39;;

导入Ember

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

然后是组件hbs文件

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

然后是模板视图

  {{#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"}} 

它运作得很好

Answer 2

组件会创建自己的HTML标记，其中包含您在模板中包含的所有内容。

在您的示例中，生成的HTML可能类似于：

<div> <!-- The component div tag -->
    <div class="chat-window"> <!-- Your div tag -->
        <!-- Everything that's rendered in the {{yield}} -->
    </div>
</div>

使您的组件具有我认为您想要的HTML结构的Ember方法是：

{{! component hbs file }}
{{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"}}

/* component js file */
export default Ember.Component.extend({
  classNames: ['chat-window'], // this classes are added to the component HTML tag
  didRender() {
    const el = this.$(this.element); // You can get the tag with `this.element`
    el.scrollTop(el[0].scrollHeight);
  }
});