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 中的反应变量。

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

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

Answer 1

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

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

每次修改您的消息列表时，您都可以使用Tracker.afterFlush，在其他所有反应式计算完成后运行任意代码。

{{#each}} 块是这些计算之一，它的作用是侦听您作为参数提供的反应性数据源，并重新渲染其 Template.contentBlock 与从源中获取的项目重复的次数一样多，其中当前项目作为当前数据上下文。

通过监听与 {{#each}} 块帮助程序完全相同的反应数据源并在它完成自己的反应计算之后运行您的代码，您可以获得实际请求的行为，而无需依赖一些奇怪的 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));
});

Answer 2

@saimeunt 提供了优雅的解决方案，但我以其他方式实现了它，也许有人觉得它也有帮助。

由于我不希望每次有新消息到达时都执行我的代码，所以我无法在自动运行完成后触发滚动。 （你会说，好吧，在只依赖于dialogId 的自动运行中执行。-然后我无法获得此对话框的确切消息数，因为订阅需要一些时间）

HTML

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

JS

Template.chat.onCreated(function () {
    var self = this;
    self.messages = function() {
        return Messages.find({dialogId:Session.get("dialogId")})
    }
    self.autorun(function(){
        self.subscribe("messages", Session.get("dialogId"));
    })
});
//helpers skipped
Template.chat.onRendered(function () {
    var self = this;
    self.$(".chat").on("MESSAGES_READY_EVENT", function () {
        var computationNumber = 0;
        var $messages = self.$(".messages");
        //how many massages we have to render
        var total = self.messages().count();
        //max tries
        var maxTries = 10;
        var intervalId = Meteor.setInterval(function () {
            var totalNodes = $messages.children().length;
            if (computationNumber++ >= maxTries || total <= totalNodes) {
                Meteor.clearInterval(intervalId);
                $messages.scrollTop(someValue);
            }
        }, 100);
    });
});