流星の開閉モーダル

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をtrueに設定し、その逆に設定します。

Answer 1

jQueryがあるので、クリックイベントの要素を簡単に表示/非表示できます。私はここにセッションを持つ理由は見当たりません。

イベント：あなたのCSSで

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

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

は、モーダルの両方は、それらが見えるようになりますjQueryの.show()としてdisplay: none;を持っています。

.onRendered()のヘルパーでは、すでに{{#if currentUser}}をチェックして正しい要素を表示しているため、モーダルは最初CSSで非表示になり、クリックイベントで表示されるため、セッションを消去するだけです。

EDIT

はさらに、次の2つのTemplate.Nav.events({})を持っています。あなたはそれをすることはできません。