流星显示/隐藏元素点击

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做这件事我知道我可以通过在vanilla 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'); 
    } 
});