I am attempting to control when I present the Sign In / Sign Up template to my users. Currently I’m trying to use Session.set() to set a showLoginForm variable. When set to true, the visitorPage template should in turn render the signUpOrLogin template. Otherwise, it displays a generic visitor page. I have a Sign In / Sign Up link in my NavBar that is setting the showLoginForm variable to true using Session.set(“showLoginForm”,true) but I think I’m experiencing an issue with trying to set showLoginForm when it is also being returned by the visitorPage template helper.
When I click my Sign In / Sign Up link, I get the following error in my browser console:
Exception from Tracker afterFlush function:
debug.js:41 TypeError: callbacks[i].call is not a function
at template.js:116
at Function.Template._withTemplateInstanceFunc (template.js:437)
at fireCallbacks (template.js:112)
at null.<anonymous> (template.js:205)
at view.js:104
at Object.Blaze._withCurrentView (view.js:523)
at view.js:103
at Object.Tracker._runFlush (tracker.js:468)
at onGlobalMessage (setimmediate.js:102)
What I think is occurring is that the template helper is calling Session.get(“showLoginForm”) while my event handler is calling Session.set(“showLoginForm”) and its creating a bit of a race condition. If I change my visitorsPage template’s spacebars #if statement from #if showLoginForm to #if true or #if false, the template routing behaves as expected. Is my suspicion correct? Is there a better way to accomplish what I’m trying to accomplish?
Here is my test.html…
<head>
<title>BBot2.0</title>
</head>
<body class="grey darken-4">
<div class="container">
{{>mainLayout}}
</div>
</body>
<template name="mainLayout">
{{> NavBar }}
<div class="container">
{{#if currentUser}}
{{> memberPage}}
{{else}}
{{> visitorPage}}
{{/if}}
</div>
</template>
<template name="memberPage">
<div class="row">
<div class="col s12 grey lighten-2 center" style="height:400px">
TEST
</div>
</div>
</template>
<template name="visitorPage">
{{#if displayLoginForm }}
<div class="row">
<div class="col s6 offset-s3 grey lighten-2 center">
{{>signUpOrLogin}}
</div>
</div>
{{else}}
<div class="row">
<div class="col s6 grey lighten-2 center">
{{>leaderBoard}}
</div>
<div class="col s6 grey lighten-2 center">
{{>spotlight}}
</div>
</div>
<div class="row">
<div class="col s12 grey lighten-2 center">
{{>featured}}
</div>
</div>
{{/if}}
</template>
<template name="signUpOrLogin">
<div class="row center">
{{>atForm}}
</div>
</template>
And my test.js…
Template.NavBar.events({
'click #signOut': function() {
Session.set("showLoginForm",false);
AccountsTemplates.logout();
},
'click #signIn': function() {
Session.set("showLoginForm",true);
}
});
Template.visitorPage.helpers({
displayLoginForm: function() {
return Session.get("showLoginForm");
}
});