在每个循环完成从集合中呈现项目后执行代码

Question

我正在构建基本的聊天应用程序只是为了尝试流星。当用户进入聊天频道时，向他显示底部的最新消息是合乎逻辑的。现在我正在尝试使用以下代码来实现这一目标

模板管理器

Template.messages.rendered = function(){
  var message_container = this.find('.messages');
  var height = message_container.scrollHeight;
  $(message_container).animate({scrollTop: height}, 1000)
};

模板

<template name="messages">
   <div class="messages">
     {{# each messages}}
   {{> message}}
     {{/each}}
   </div>
</template>

问题是模板管理器中的代码正在执行，而并非所有消息都已呈现，因此导致高度不正确，以 var height 为单位。

Answer 1

这与 Discover meteor 书中的显微镜演示应用程序类似的瓶颈 - rendered 方法的问题是，当模板使用数据完成渲染，或者只是在填充数据之前渲染模板。解决方法可能是跟踪某个本地集合或变量中的消息计数，并在 rendered 中检查当前消息计数是否大于以前。如果是这样，请向下滚动一个窗口。

上面的书第14章（如果我没记错的话）使用了这种方法。

简单的肮脏技巧可能只是在渲染中测试超时，但我不建议这样做。

哦，还有一个更肮脏的技巧是在页面的 dom 树的末尾添加一些不可见的元素，以便在它之前插入所有新消息。然后只需在此元素位置更改上添加一个事件处理程序。每次呈现新消息时，它都会将该元素向下推一点，因此将触发一个事件。在该事件处理程序中添加代码以向下滚动。类似的解决方案可以在here找到。