Question

我正在构建一个简单的基于Ember CLI的聊天应用程序。我有一个异步加载的消息列表，当我们使用一些简单的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代码。

Answer 1

你能不能这样做：

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

Answer 2

我建议将对话变成一个组件（Ember中的所有东西现在都朝着成为一个组件的方向发展;））。在组件内部，您可以观察获取body的{{1}}属性，并使用message执行代码。您可以在运行循环中阅读更多内容here。

您的组件如下：

Ember.run.scheduleOnce

您的模板如下：

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

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

工作解决方案here

（我使用<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>，但投入了FixtureAdapter以使其更加真实。

Ember - 在DOM加载上运行JS

2 个答案: