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加载

回答

相关问题