单击流星显示和隐藏模板

Question

我想在单击按钮时显示一个模板而不是另一个模板。类似于 Whosebug 问题中的 "add comment" link。在下面的示例中，我想将 {{> newCommentLink}} 替换为 {{> 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>

单击流星显示和隐藏模板

Meteor show and hide Template on click

meteor

iron-router

meteor-blaze