Meteor anzeigen/ausblenden Element auf die Schaltfläche klicken

Question

Ich habe eine Vorlage wie folgt:

<template name="Menus"> 
    <button class="btn_create new_menu_toggle"><i class="fa fa-plus"></i> Create a new menu</button> 
    <button class="btn_cancel new_menu_toggle"><i class="fa fa-times"></i> Cancel</button> 
    {{> NewMenu}} 
</template> 

Was ich versuche zu erreichen, dass zunächst nur die btn_create gezeigt. Wenn .btn_create gedrückt wird, wird {{> NewMenu}} gerendert und .btn_create wird durch btn_deny ersetzt. Umgekehrt für das Verhalten von btn_deny.

Wie würde ich das in Meteor machen? Ich weiß, dass ich dies wahrscheinlich durch Hinzufügen/Ändern von Klassen in Vanille-Javascript erreichen könnte, aber ich würde gerne wissen, ob es eine einfachere Methode mit Meteor/Blaze gibt.

Answer 1

Ein einfaches Muster ist ein Session-Variable zu verwenden, um den Zustand

html zu verfolgen:

<template name="Menus"> 
{{#if createMode}} 
    <button class="btn_create new_menu_toggle"><i class="fa fa-plus"></i> Create a new menu</button> 
    {{> NewMenu}} 
{{else}} 
    <button class="btn_cancel new_menu_toggle"><i class="fa fa-times"></i> Cancel</button> 
{{/if}} 
</template> 

In Ihrem Javascript müssen Sie einige Event-Handler einzurichten, den Zustand zu wechseln:

Template.Menus.events({ 
    'click .btn_create'(ev){ 
    session.set('createMode',true); 
    }, 
    'click .btn_cancel'(ev){ 
    session.set('createMode',false); 
    } 
}); 

Wenn die Vorlage gerendert wird, müssen Sie die Sitzungsvariable initialisieren:

Template.Menus.onRendered(function(){ 
    session.set('createMode',true); 
}); 

Schließlich müssen Sie die Helfer die Vorlage für die spacebars bedingten Ausdruck verwenden können:

Template.Menus.helpers({ 
    createMode(){ 
    return session.get('createMode'); 
    } 
});