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

Meteor show / hide element on button click

本文关键字：元素 按钮 隐藏 显示 流星      更新时间：2023-09-26

我有一个这样的模板：

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

一个简单的模式是使用会话变量来跟踪状态

.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');
  }
});
相关文章：