javascript - meteor 打开/关闭模式

Question

我正在尝试通过单击按钮来打开或关闭模式。

我当前的模板如下所示:

<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>

在相应的 .js 文件中，我设置了必要的助手和事件:

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

现在，我假设这是因为我对 javascript 的了解有限，但我如何正确地让它工作，以便在单击 .log_in_toggle 时，它设置 loginMode 如果为真则为假，反之亦然。

Answer 1

由于您拥有 jQuery，您可以轻松地显示/隐藏点击事件中的元素。我看不出有什么理由在这里举行 session 。

事件:

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

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

在您的 CSS 中，让两个模态框都具有 display: none;，因为 jQuery .show() 将使它们可见。

在您的助手和 .onRendered() 中，只需删除 session ，因为您已经通过检查 {{#if currentUser}} 和模态显示了正确的元素最初将使用 CSS 隐藏，您将通过点击事件显示它们。

编辑

此外，您还有两个 Template.Nav.events({})。你不能那样做。