Why Is Wrong Spacebars #if Block Executed?

Question

I am trying to write an If Else statement in a Spacebars template inside my Meteor app as shown below, but unfortunately I am getting the three blocks processed even though only one is returning true, so was wondering if someone can please tell me what I am doing wrong / missing here and how to resolve it? Thanks

<template name="header">
  <nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="{{pathFor 'home'}}">{{ siteTitle }}</a>
      </div>
      <div class="collapse navbar-collapse" id="main-nav">
        {{#if currentUser}}
                              <ul class="nav navbar-nav navbar-right">
                  {{#if isAppAdmin}}

                                  <li class="dropdown">
                                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-tasks"></i> Admin <i class="fa fa-caret-down"></i>
                                      </a>
                                  </li>
                  {{else}}
                              {{#if isProUser}}                                     
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                          <i class="fa fa-tasks"></i> Pro User <i class="fa fa-caret-down"></i>
                                        </a>
                                    </li>
                              {{/if}}

                  {{/if}}
                                  <li class="dropdown">
                                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-user"></i> {{ currentUser.profile.name }} <i class="fa fa-caret-down"></i>
                                      </a>
                                  </li>              
                              </ul>
        {{else}}
          <div class="navbar-right">
            <a href="{{ pathFor 'entrySignIn' }}" class="btn btn-default navbar-btn">Sign in</a>
            <a href="{{ pathFor 'entrySignUp' }}" class="btn btn-primary navbar-btn">Register</a>
          </div>
        {{/if}}
      </div>
    </div>
  </nav>
</template>

header.js

Template.header.helpers({
    isProUser: function () {
        var retVal = Meteor.user().profile.sholdertype == 'prouser' ? 'true' : 'false';
        return retVal;
    },
    isAppAdmin: function () {
        var retVal = Meteor.user().profile.sholdertype == 'admin' ? 'true' : 'false';
        return retVal;
    }
});

Answer 1

You are returning string while if is expecting a boolean, change

Template.header.helpers({
    isProUser: function () {
        var retVal = Meteor.user().profile.sholdertype == 'prouser' ? 'true' : 'false';
        return retVal;
    },
    isAppAdmin: function () {
        var retVal = Meteor.user().profile.sholdertype == 'admin' ? 'true' : 'false';
        return retVal;
    }
});

To:

Template.header.helpers({
    isProUser: function () {
        var retVal = Meteor.user().profile.sholdertype == 'prouser' ? true : false;
        return retVal;
    },
    isAppAdmin: function () {
        var retVal = Meteor.user().profile.sholdertype == 'admin' ? true : false;
        return retVal;
    }
});

and it should work.