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

时间:2014-04-24 15:57:33

标签: meteor

我正在使用带有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 &#34; link-popover-wrapper&#34; 。后续模板在帖子项中插入div不会插入,因此页面中只有一个隐藏的div。我按照以下方式使用模板变量处理它。 var _poppeUp = true;

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

        return false;
    }
});

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

有没有办法在Meteor中克服这个问题?

1 个答案:

答案 0 :(得分: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,您的模板会添加元素。