Fred J.
Fred J.

Reputation: 6019

conditional hide and show template

Using meteor reactiveness through Session, I expected this code to display the Template "mainMenu" if the variable "showMainMenu" is set to true which should happen on first run but I do not see the template displayed.
What went wrong? Thanks

/client/session.js
Session.set('showMainMenu', true);

//---main.html---------

head>
  <title>Tasks</title>
</head>

<body>
  <header>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="row">
          {{> header}}
        </div>
      </div>
    </nav>
  </header>
  {{#if showMainMenu}}
    {{> mainMenu}}
  {{/if}}
</body>

microscope
├── README.txt
├── client
│   ├── main.html
│   ├── main.js
│   ├── session.js
│   ├── stylesheets
│   │   └── style.css
│   └── templates
│       ├── header
│       │   ├── header.html
│       │   └── header.js
│       └── mainMenu
│           ├── main_menu.html
│           └── main_menu.js
├── lib
│   └── collections
│       └── task.js
├── public
│   └── abc.png
└── server
    ├── collections.js
    └── publications.js

Upvotes: 1

Views: 346

Answers (1)

chazsolo
chazsolo

Reputation: 8439

Your templates do not have access to the session simply by referencing the Session variable by name, like you are doing

{{#if showMainMenu}}
  {{> mainMenu}}
{{/if}}

Instead, you have a few options, but you could very easily just make a Template helper

Template.body.helpers({
  showMainMenu: function() {
    return Session.get('showMainMenu');
  }
});

What I recommend

Make a global helper that can return the result of a Session variable

Template.registerHelper('session', function( value ) {
  return Session.get(value);
});

then, in your html:

{{#if (session 'showMainMenu')}}
  {{> mainMenu}}
{{/if}}

Upvotes: 1

Related Questions