点击流星秀并隐藏模板

Question

我想在按钮点击时显示一个模板而不是另一个模板。类似于＆＃34;添加评论＆＃34; StackOverFlow问题中的链接。在下面的示例中，我想要替换{{＆gt; newCommentLink}} {{＆gt; postEditor}}

<template name="main">
  {{#each posts}}
        {{> posts}}
   {{/each}}
</template>

<template name="posts">
  {{#each comments}}
        {{> comment}}
  {{/each}}
  {{> newCommentLink}}
</template>

如果无法做到这一点，还有其他办法吗？

Answer 1

您可以使用reactive variable来确定要显示的模板：

Template.posts.onCreated(function() {
    this.newCommentLink = new ReactiveVar(true);
});

Template.posts.helpers({
    shouldShowNewCommentLink() {
      return Template.instance().newCommentLink.get();
    }
});

Template.posts.events({
    'click button': function(event, template) {
      template.newCommentLink.set(!template.newCommentLink.get());
    }
});

在模板中：

<template name="posts">
  {{#each comments}}
        {{> comment}}
  {{/each}}
  <button class="btn btn-default">Click me to switch...</button>
  {{#if shouldShowNewCommentLink}}
    {{> newCommentLink}}
  {{else}}
    {{>postEditor}}
  {{/if}}
</template>