Problem with Session.set() and Session.get() on the same variable? Trying to control template flow and getting odd error


#1

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

#2

Is it works without an error from console? It seems that problem is not abou Session.set()


#3

If I do Session.set(“showLoginForm”,true) in the console, it does change the template being rendered correctly. However, I still get the same error:

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)

#4

Seems that pointed here template.js
Try to check onRendered, onCreated, rendered, created callbacks for all your templates. Or just comment the code inside those functions and then uncomment step by step to find the error


#5

I determined that it is the {{>atForm}} template call from the useraccounts:materialize package that is causing this. If I remove just that template call I stop getting the error. If i reinsert it, it starts again. Not sure why its happening yet. I’ve tried removing the package and readding it and it didn’t make a difference.