Question

我在聊天应用中使用Collections.observe。提交一条消息后，需要向下滚动所有用户才能显示新消息。

我在尝试：

Messages.find().observe({
  added: function() {
    $('.messages').scrollTop($('.messages')[0].scrollHeight); // scroll to bottom
  }
});

但是，此功能在消息出现在屏幕之前执行。但我需要在屏幕上显示消息后执行observe功能，向下滚动。我怎么能这样做？

Answer 1

您可以将其打包在Meteor.defer或Tracker.afterflush中。但那些是一个滑坡。

理想情况下，observe应保留给第三方API（如地图，d3j等）。通过观察那些像滚动一样简单的东西，然后你的模板+帮助器处理同样的事情，你的代码就MVC而言将是一个热点。

我要做的是在你的助手中添加一个索引。当index === collection.cursor.count()时，您知道自己是最近的消息，然后您可以滚动到该模板实例。（我假设每条消息都有自己的模板）。

Answer 2

也许您应该在this.autorun()事件的模板onRendered中使用.messages。{我的意思是：

Template.myTemplate.onRendered(function () {
    this.autorun(function () {
        if (Messages.find().count() /*or some more specific reactive dep*/) {
            this.$('.messages').scrollTop(this.$('.messages')[0].scrollHeight);
        }
    }.bind(this))
})

Meteor observeChanges在屏幕反应之前运行

2 个答案: