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钩子中。我还尝试在模型钩子之后将它放在.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钩子中，你可以在运行循环afterRender队列中运行DOM代码。

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

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

路线刷新后，ember.js滚动到聊天框底部

1 个答案: