流星顯示/隱藏元素點擊

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'); 
    } 
});