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

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 中添加/更改类来完成此操作，但我想知道是否有更简单的方法使用流星/火焰。

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

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

Meteor show / hide element on button click

javascript

meteor

meteor-blaze