如何在Meteor中隐藏/显示元素？

Question

在我的Meteor应用程序中,我有一个带有两个div的模板:注册和登录.代码如下:

  <div class="login">
    <h1> Log in. </h1>
    <a href"#">Create an account</a>
  </div>

  <div class="register">
    <h1> Register. </h1>
    <a href"#">Log in</a>
  </div>

首先,页面应显示"登录"div(最终将在其中包含一个表单),并且"register"div将从视图中隐藏.但是,当我单击"创建帐户"时,"登录"div应该消失,并且应该出现"register"div.此时,如果我点击"登录",则应该发生相反的情况.

基本上,我只是希望能够在同一页面上的登录和注册表单之间切换.我使用{{#if}}和点击事件尝试了这个,但这没有成功.

任何人都知道如何做到这一点？

Answer 1

有一个简单的解决方案和硬编码解决方案来实现这一目标.

在简单的解决方案的使用账户的UI包,只需要使用

{{> loginButtons}} 帮助进入HTML,这实际上有你想要的预期行为.

而艰难的方式

在困难的方式存在2个可能的解决方案,使用简单的jQuery代码和Css.像这样.

jQuery和CSS解决方案

使用示例中的相同HTML,使用此2事件处理程序.

Template.example.events({
  'click #aRegister':function(){
    $(".login").css('visibility', 'hidden');
    $(".register").css('visibility', 'visible');

    },
     'click #aLogin':function(){
    $(".register").css('visibility', 'hidden');
     $(".login").css('visibility', 'visible');
    }
  })

这个.css

.register{
    visibility: hidden;
  }

这是MeteorPad

流星方式(使用Sessions和#if)

首先使用相同的2个事件,我们使用一些Sessions变量,设置为true/false会话的值,就像这样.

Template.example.events({
  'click #aRegister':function(){
  Session.set('showRegister',true);
    },
     'click #aLogin':function(){
    Session.set('showRegister',false);
    }
  })

现在在HTML上我们使用{{#if}}

<template name="example">
{{#if showTheRegisterDiv}}
  <!-- Here if the Session returns its == true this part of the template will be rendered -->
  <div class="register">
    <h1> Register. </h1>
    <a href="#" id="aLogin">Log in</a>
  </div>
 {{else}}
  <!-- or if its == false we render this part -->
  <div class="login">
    <h1> Log in. </h1>
    <a href="#" id="aRegister">Create an account</a>
  </div>
{{/if}}
</template>

这最终可以归功于这个模板助手.

Template.example.helpers({
    showTheRegisterDiv:function(){
        return Session.get('showRegister')
    }
})

这是MeteorPad