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

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

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

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

1 个答案: