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时，如果为true，则将loginMode设置为false反之亦然。

Answer 1

由于您拥有jQuery，因此您可以轻松地在点击事件中显示/隐藏元素。我没有理由在这里举行会议。

活动：

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

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

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

在您的助手和.onRendered()中，只需删除会话，因为您已经通过选中{{#if currentUser}}显示了正确的元素，并且您的模态最初将使用CSS隐藏，您将通过点击事件向他们展示

修改

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

流星开/关模态

1 个答案: