流星#each循环准备好了 [英] Meteor #each loop ready

问题描述

我想知道有没有办法知道#each循环是否准备就绪。 准备好我的意思是它渲染了所有节点并插入到DOM中。我甚至不谈论 onRendered 回调（旧呈现）。我试过了

I wonder is there any way to know if #each loop is "ready". By "ready" I mean it rendered all nodes and inserted into the DOM. I don't even speak about onRendered callback (old rendered). I tried

<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)
})

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

But it does not work either. I don't want to use timers.

更新

messages 是当前对话框的一组文本消息， dialogId 是存储在 Session <中的一个被动变量/ code>。

messages is a collection of text messages for current dialog, dialogId is a reactive var stored in the Session.

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

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

So if someone changes dialogId, myTemplate loads another dialog messages, and I want to know when this messages are ready, to scroll to a specific message. Simple onReady does not work, since I can not call scrollTop accurately before all messages are rendered and got its own height.

推荐答案

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

@saimeunt provided elegant solution, but I implemented it other way, maybe someone find it helpful too.

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

Since I don't want my code been executed everytime a new message arrives, I can not trigger scrolling after autorun is finished. (You would say, OK, do it in autorun that depends only on dialogId. - then I can not get exact message count of this dialog since subscription should take some time)

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);
    });
});

这篇关于流星#each循环准备好了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！