Uncaught ReferenceError: template is not defined

1

Hello,

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)

MAIN.HTML

<head>
  <title>ConeTrips</title>
  
</head>

<body>

{{> nav}}



</body>





<template name="nav">

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

  {{else}}
  <p> NO </p>

  {{/if}}



    <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>
      </button>
      <a class="navbar-brand" href="#">ConeTrips</a>
    </div>
   <!-- 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>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Log out</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</template>

MAIN (JS):


Template.nav.onCreated(function(){
this.showHistory = new ReactiveVar( false );

});

Template.nav.helpers({

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

});

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

}
,
'click .history': function(){
	template.showHistory.set(true);
	console.log("On page: history");

}

});
2

Your event handler should look like:

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

or (ES6 style):

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