流星显示/隐藏元素在按钮上单击

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

最后，您需要模板可以用于空格键条件表达式的帮助程序：

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