Meteor показать/скрыть элемент на кнопку мыши

Question

У меня есть шаблон, как так:

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

То, что я пытаюсь выполнить то, что изначально btn_create показывается только. Если нажата .btn_create, отображается {{> NewMenu}}, а .btn_create заменяется на btn_deny. И наоборот, для поведения btn_deny.

Как я мог бы это сделать в Meteor Я знаю, что, возможно, я смог бы это сделать, добавив/изменив классы в ванильном Javascript, но я хотел бы знать, есть ли более простой метод, использующий Meteor/Blaze.

Answer 1

Простой шаблон должны использовать переменный сеанс для отслеживания состояния

HTML:

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

В вашем JavaScript вы должны настроить некоторые обработчиков событий для переключения состояния:

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

При визуализации шаблона вам необходимо инициализировать переменную сеанса:

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

Наконец вам нужен помощник ваш шаблон можно использовать для spacebars условного выражения:

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