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

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

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

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

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

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