在每個循環完成從集合中渲染項目后執行代碼

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樹的末尾添加一些不可見的元素，以便所有新消息都應插入到它的前面。 然后，只需在此元素位置更改上添加事件處理程序即可。 每次呈現新消息時，都會將該元素向下推一點，因此將觸發一個事件。 在該事件處理程序中，添加代碼以向下滾動。 在這里可以找到類似的解決方案。