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

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高度。

Answer 1

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

此方法用于上述图书的第14章（如果我没有记错）。

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

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