灰燼組件忽略高度/溢流

Question

我試圖讓餘燼組件時它的加載，將滾動到其自身的底部（它是一個聊天窗口視圖）

我拿到了分量：

從'餘燼'導入灰燼;

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結構我想你想的是：

​​

/* 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); 
    } 
});