如果内容不在页面中，如何在 Meteor 模板中插入部分 html 内容

Question

我正在使用带有 Spark 的 Meteor 0.7.0.1，并且我有以下用于弹出内容的模板，并且该模板插入到每个帖子项中。

<template name="postLinks">
    <a href="#" id="ui-popover-container-{{id}}" class="popover-list-trigger dropdown-toggle" data-toggle="dropdown">
        <i class="icon-calendar"></i>
    </a>
    {{#if poppedUp}}
    <div id="link-popover-wrapper" style="display:none">
        <ul class="link-popover">
        {{#each linkOptions}}
            <li><a tabindex="-1" class="link-action" id="link-{{value}}" href="#">{{label}}</a>
            </li>
         {{/each}}
        </ul>
    </div>
    {{/if}}
</template>

我只想在第一次加载模板时打印 div "link-popover-wrapper" 一次。后续模板会在 div 不会插入的帖子项目中插入，因此页面中只有一个隐藏的 div。我通过以下方式使用模板变量处理它。 var _poppeUp = true;

Template.postLiks.helpers({
    poppeUp : function () {
        if (_poppeUp) {
            _poppeUp = false;
            return true;
        }

        return false;
    }
});

这是第一次加载页面时，页面中只有一个 div "link-popover-wrapper" 的实例。问题是当更新帖子并重新呈现页面时，模板变量仍设置为 false 并且 div 未打印在页面中。我想在重新渲染页面时重置该模板变量。

有没有办法在 Meteor 中解决这个问题？

Answer 1

只需添加在页面渲染中执行相反操作的代码：

Template.postLinks.rendered = function() {
  if (!_poppedUp)
    _poppedUp = true;

你没有问，但这让我觉得这是一种奇怪的实现方式。而不是{{#if poppeUp}}，为什么不{{#with getFirstLinkPopoverWrapper}} 然后定义一个getFirstLinkPopoverWrapper 助手，它只返回你想要显示的link-popover-wrapper div？然后您就无需担心重新渲染或跟踪某些变量。

编辑：替代实现：

您可以简单地使用 jQuery 告诉您页面上是否已经存在 id link-popover-wrapper 的元素：

Template.postLinks.helpers({
  poppedUp: function() {
    return $("#link-popover-wrapper").length !== 0;
  }
}

就是这样。如果不存在这样的元素，则 jQuery 对象的长度为零，并且该语句的计算结果为 false 并返回 false。否则返回 true 并且您的模板会添加该元素。