Question

我有一个“Messages”集合，我在bootstrap ui popover中通过{{#each}}显示。出于某种原因，当我

Messages.find({});

在控制台中，我可以看到新记录......但是弹出窗口不显示记录，除非我关闭它然后重新打开。

以下是调用叠加层的模板：

<template name="messages">
  <div class="container section-light">
    <li>
      <div class="row">
        <div class="col-xs-2">
        </div>
        <div class="display-name col-xs-10">
          <a class="display-name-link display-name-link-{{this._id}}" data-toggle="popover" href="#">{{displayName}}</a>
          <div id="popover-content-{{this._id}}" class="friend-message hide container">
            <div class="message-list">
              {{#each messages }}
                <div class="message-item">
                  <p class="message">{{message}}</p>
                </div>
              {{/each}}
            </div>
          </div>
        </div>
      </div>
    </li>
  </div>
</template>

Answer 1

这里的问题是Bootstrap popover生成一个新的DOM对象，并在每次打开popover时插入它。这意味着虽然您正在更新其中应包含的信息，但引导程序已生成弹出窗口，因此新条目不会显示。在template.onRendered中，您可以跟踪添加的消息，例如：

count = Messages.find().count();

this.autorun(function(){

  if (Messages.find().count() > count){ //check if messages added since dom loaded
     if($('.popover')){ //check if a popover is currently open..
        //identify popover and re-trigger it...
     }
  }
});

因为这是一种痛苦，如果我是你，我会编写自己的使用隐藏元素的popover，然后在触发时显示它，而不是添加新的dom元素。

Answer 2

尝试使用Template.subscriptionsReady包装模板，以确保订阅准备就绪，如下所示。 Reference

<template name="messages">
  {{#if Template.subscriptionsReady}}
  <div class="container section-light">
    <li>
      <div class="row">
        <div class="col-xs-2">
        </div>
        <div class="display-name col-xs-10">
          <a class="display-name-link display-name-link-{{this._id}}" data-toggle="popover" href="#">{{displayName}}</a>
          <div id="popover-content-{{this._id}}" class="friend-message hide container">
            <div class="message-list">
              {{#each messages }}
                <div class="message-item">
                  <p class="message">{{message}}</p>
                </div>
              {{/each}}
            </div>
          </div>
        </div>
      </div>
    </li>
  </div>
{{/if}}
</template>

Meteor.js集合：在bootstrap ui popover中没有更新的新记录

2 个答案: