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

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图书的显微镜演示应用程序的瓶颈类似--呈现方法的问题是，当数据完成呈现的模板或填充数据之前呈现的模板时，无法确定是否会触发。解决方法可能是跟踪某些本地集合中的消息计数，或者仅仅跟踪变量，并在呈现的检查中检查当前邮件计数是否比以前更大。如果是这样，请向下滚动一个窗口。

这个方法在上面的第14章(如果我没有错的话)中使用。

简单的脏技巧可能只是测试呈现中的超时，但我不需要重新注释。

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