Meteor show and hide Template on click

Question

I want to show one template instead of another template on a button click. Similar to the "add comment" link in a StackOverFlow question. In the below example I want to replace {{> newCommentLink}} with {{> postEditor}}

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

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

If this is not possible, is there any other way?

Answer 1

You can use a reactive variable to determine which template to show:

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());
    }
});

In template:

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