Uncaught ReferenceError: template is not defined


I am trying to hide/show some content on my dynamic page, however I getting the following error. I have looked up how it’s done and I followed all of steps completely. I have no idea why I am getting this error:

Error happens when I call template.showHistory.set(true);

Uncaught ReferenceError: template is not defined
    at Object.clickHistory (main.js:48)
    at blaze.js?hash=813922c…:3774
    at Function.Template._withTemplateInstanceFunc (blaze.js?hash=813922c…:3743)
    at Blaze.View.<anonymous> (blaze.js?hash=813922c…:3773)
    at blaze.js?hash=813922c…:2616
    at Object.Blaze._withCurrentView (blaze.js?hash=813922c…:2270)
    at Blaze._DOMRange.<anonymous> (blaze.js?hash=813922c…:2615)
    at HTMLAnchorElement.<anonymous> (blaze.js?hash=813922c…:862)
    at HTMLBodyElement.dispatch (jquery.js?hash=c57b3cf…:4723)
    at HTMLBodyElement.elemData.handle (jquery.js?hash=c57b3cf…:4391)




{{> nav}}


<template name="nav">

 {{#if showHistory}}
  <p> YES </p>

  <p> NO </p>


    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      <a class="navbar-brand" href="#">ConeTrips</a>
   <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">

        <li class="active add"><a href="#" value="add"><span class="glyphicon glyphicon-plus"></span></a></li>
        <li><a href="#" class="history" value="history"><span class="glyphicon glyphicon-calendar"></span></a></li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-wrench"> </span>
      <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Account settings</a></li>
            <li><a href="#">Global settings</a></li>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Log out</a></li>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->


this.showHistory = new ReactiveVar( false );



	 showHistory: function() {
    return Template.instance().showHistory.get();


'click .add': function(){
	console.log("On page: Add new");

'click .history': function(){
	console.log("On page: history");



Your event handler should look like:

'click .history': function(event, template){
	console.log("On page: history");

or (ES6 style):

'click .history'(event, template) {
	console.log("On page: history");
1 Like