Ember - 在DOM上運行JS加載

我正在構建一個簡單的基於Ember CLI的聊天應用程序。我有一個是異步加載郵件列表，我想滾動至底部時，他們都使用一些簡單的JS這樣裝：Ember - 在DOM上運行JS加載

Ember.$('.conversation').scrollTop(Ember.$('.conversation')[0].scrollHeight);

我應該在哪裏把這個代碼，它運行後，所有消息對象被加載和渲染？

非常感謝

更新代碼的

更多細節 - 我使用一個會話路由/控制器/模板加載一個單一的談話對象。對話模型在模型描述中包含{async：true}的許多消息。這條路線是這樣的：

import Ember from 'ember'; 

export default Ember.Route.extend({ 

    model: function(params) { 
    return this.store.find('conversation', params.conversation_id); 
    } 
});

而且模板看起來像是：

<div class="conversation"> 
    {{#each message in messages}} 
     <div class="message">{{message.body}}</div> 
    {{/each}} 
</div>

對於很多消息我想滾動到.conversation DIV底部的談話時，所有的消息被加載。我不確定在哪裏放置JavaScript代碼。

來源

2015-03-02 AdamP

ch eck out initializers http://ember.zone/ember-application-initializers/ – iwayneo 2015-03-02 14:44:54

@AdamP你可以分享你如何以及在哪裏加載這個aynch數據？它在控制器中嗎？每次都使用相同的代碼來加載數據嗎？ – Sushant 2015-03-02 15:48:33

更多詳情更新以上 - 感謝您的幫助。 – AdamP 2015-03-02 21:11:54

你能不能做到這一點：

return this.store.find('conversation', params.conversation_id).then(function(results){ 
    //whatever your code is here: 
    Ember.$('.conversation').scrollTop(Ember.$('.conversation')[0].scrollHeight); 
});

來源

2015-03-03 13:52:03 iwayneo

我建議做談話到一個組件（一切都在灰燼是成爲一個組件，這些天移動;））。在組件內部，您可以使用觀察,body屬性message並使用Ember.run.scheduleOnce執行代碼。您可以在一般的here的運行循環中閱讀更多內容。

你的組件想如下：

App.ZConversationComponent = Ember.Component.extend({ 
    classNames: ['conversation'], 
    watchMessages: function(){ 
    Ember.run.scheduleOnce('afterRender', this, this.scrollToMessage);  
    }.observes('[email protected]'), 

    scrollToMessage: function(){ 
    console.log('Start scrolling'); 
    $('body').animate({scrollTop: $('.conversation').offset().top}, 1000); 
    } 
});

而且你的模板想如下：

<script type="text/x-handlebars" id='index'> 
    <div class='tall'>SOME CONTENT ON PAGE</div> 
    <div class='tall'>MORE CONTENT ON PAGE</div> 

    {{ z-conversation conversation=model}} 
</script> 

<script type="text/x-handlebars" id="components/z-conversation"> 

    {{#each message in conversation.messages}} 
    <div class="message">{{message.body}}</div> 
    {{/each}} 

</script>

工作液here

（我用了FixtureAdapter，但在扔latency使其更加真實）

來源

2015-03-03 15:43:08 Kalman

Ember - 在DOM上運行JS加載

回答

相關問題