流星开/关模态

Question

I'm trying to open or close a modal on the click of a button.

My current template looks like this:

<template name="Nav">
  {{#if currentUser}}
    <button class="settings_toggle">
      {{email}}
    </button>
    {{#if settingsMode}}
    <div class="settings_modal">
        <a href="/create">Your Menus</a>
        <a href="" class="log_out">Sign Out</a>
    </div>
    {{/if}}
  {{else}}
    <button class="log_in_toggle">
      Sign In
    </button>
    {{#if loginMode}}
    <div class="loginModal">
      {{> atForm}}
    </div> 
    {{/if}}
  {{/if}}
</template>

And in a corresponding .js file I've set up the necessary helpers and events:

Template.Nav.onRendered(function(){
  Session.set('settingsMode',true);
  Session.set('loginMode',true);
});

Template.Nav.helpers({
  loginMode(){
    return Session.get('loginMode');
  },
  settingsMode(){
    return Session.get('settingsMode');
  }
});

Template.Nav.events({
  'click .settings_toggle'(event){
    Session.set('!settingsMode');
  },
  'click .log_in_toggle'(event){
    Session.set(!'loginMode');
  }
});

Template.Nav.events({
  'click .settings_toggle'(event){
    Session.set('!settingsMode');
  },
  'click .log_in_toggle'(event){
    Session.set(!'loginMode');
  }
});

Now, I assume this is because of my limited knowledge of javascript, but how would I properly get it to work so that when .log_in_toggle is clicked, it sets loginMode to false if true and vice versa.

Answer 1

Since you have jQuery, you can easily show/hide elements on click events. I don't see a reason to have sessions here.

Events:

'click .settings_toggle': function(){
    //Shows a hidden element
    $('.elementClass').show()
}

'click .close_modal': function(){
    //Hides element
    $('.elementClass').hide()
}

In your CSS, have both of the modals have display: none; as the jQuery .show() will make them visible.

In your helpers, and .onRendered() , just erase the sessions because you already display the right elements by checking {{#if currentUser}} and your modals will be initially hidden with CSS and you'll show them with click event.

EDIT

Additionally, you have two Template.Nav.events({}) . You can't do that.