javascript - ember.js 路由刷新后滚动到聊天框底部

Question

我正在构建一个 ember 应用程序，其中包含类似电子邮件的消息传递功能。

当用户发送消息时，容器应该滚动到底部以显示新消息。这是创建新消息的操作

  createMessage(messageParams) {
    this.get('store').createRecord('message', messageParams).save()
    .then(() => {
      return this.refresh()
    })
    .then(() => {
        let objDiv = document.getElementById("message-container");
        objDiv.scrollTop = objDiv.scrollHeight;
    })
    .catch(() => {
      this.get('flashMessages')
        .danger('There was a problem. Please try again.');
    });

到目前为止，当新消息出现在容器中时，聊天框不会滚动到底部。当我在设置的超时时间内将代码包装在第二个 .then 中时，它会起作用。

我应该将容器滚动到底部的代码放在路由文件中的其他位置吗？我尝试将其放入 afterModel Hook 中。我还尝试将其放在模型 Hook 之后的 .then 中。当我这样做时，在导航到应用程序中的路线时，我得到了一个空白的白页。

model(params) {
    return Ember.RSVP.hash({
      messages: this.get('store').query('message', {
        id: params.conversation_id
      }),
      conversation: this.get('store').find('conversation', params.conversation_id)
    }).then(() => {
      let objDiv = document.getElementById("message-container");
      objDiv.scrollTop = objDiv.scrollHeight;
    });
  }

Answer 1

在 didTransition 钩子(Hook)中，您可以在渲染队列后的运行循环中运行 DOM 代码。

didTransition() {
  Ember.run.later('afterRender', () => {
    let objDiv = document.getElementById("message-container");
    objDiv.scrollTop = objDiv.scrollHeight;
  }, 100);
  return true;
},

DOM 操作代码应该放在组件中，我更喜欢您编写用于显示消息的组件并使用组件生命周期 Hook 方法(即，在您的情况下 didRender 最适合)