javascript - meteor #each循环准备就绪

Question

我想知道是否有任何方法可以知道#each 循环是否“准备就绪”。 “就绪”是指它渲染了所有节点并插入到 DOM 中。我什至不谈 onRendered 回调(旧的 rendered)。我试过了

<template name="myTemplate">
<div class="some-class">
    {{#if Template.subscriptionsReady}}
       {{#each messages}}
          <div>{{text}}</div>
       {{/each}}
       <script>
           $(".some-class").trigger("LOOP_READY")
       </script>
    {{/if}}
</div>
</template>


Template.myTemplate.onRendered(function(){
    this.$(".some-class").on("LOOP_READY", doSomething)
})

但它也不起作用。我不想使用计时器。

更新

messages 是当前对话的文本消息集合，dialogId 是存储在 Session 中的 react 变量。

Template.myTemplate.onCreated(function(){
    var self = this;
    self.autorun(function(){
        self.subscribe("messages", Session.get("dialogId"))
    })
})

因此，如果有人更改了 dialogId，myTemplate 会加载另一条对话消息，我想知道这些消息何时准备就绪，以便滚动到特定消息。简单的 onReady 不起作用，因为在呈现所有消息并获得自己的高度之前我无法准确调用 scrollTop。

Answer 1

当 Spacebars {{#each}} block 已将其跨越的每个项目渲染到 DOM 中时，没有简单的方法来获得通知。

最好的解决方案是使用另一个响应式(Reactive)计算 (Tracker.autorun) 来观察您的消息光标变化。

每次修改您的消息列表时，您都可以在所有其他响应式(Reactive)计算完成后运行任意代码来执行他们的工作，使用 Tracker.afterFlush。

{{#each}} block 是其中一种计算，其作用是监听您作为参数提供给它的响应式数据源并重新呈现其 Template.contentBlock 迭代从源中获取的项目的次数，当前项目作为当前数据上下文。

通过监听与 {{#each}} block 助手完全相同的响应式(Reactive)数据源并在它完成自己的响应式(Reactive)计算后运行您的代码，您可以获得实际请求的行为而无需依靠一些奇怪的 setTimeout 技巧。

下面是这个模式的完整实现:​​

HTML

<template name="myTemplate">
  <div class="some-class">
    {{#if Template.subscriptionsReady}}
      {{#each messages}}
        <div class="message">{{text}}</div>
      {{/each}}
    {{/if}}
  </div>
</template>

JS

// declare your reactive data source once to reuse the same in multiple places
function messagesCursor(){
  return Messages.find();
}

Template.myTemplate.helpers({
  messages: messagesCursor
});

Template.myTemplate.onRendered(function(){
  this.autorun(function(){
    // we need to register a dependency on the number of documents returned by the
    // cursor to actually make this computation rerun everytime the count is altered
    var messagesCount = messagesCursor().count();
    //
    Tracker.afterFlush(function(){
      // assert that every messages have been rendered
      console.log(this.$(".messages") == messagesCount);
    }.bind(this));
  }.bind(this));
});