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>

首先，页面应该显示“login”div（最终会有一个表格），“register”div将被隐藏起来。但是，当我单击“创建帐户”时，“登录”div应该消失，并且应该出现“register”div。此时，如果我点击“登录”，则应该发生相反的情况。

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

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

Answer 1

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

简易解决方案使用accounts-ui包，只需使用

{{> loginButtons}}帮助HTML，这实际上具有您想要的预期行为。

艰难的方式

在艰难的道路上存在两种可能的解决方案，使用简单的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

Meteor Way（使用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

Answer 2

<body>
  {{#if displayLogin}}

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

  {{else}}

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

  {{/if}}
</body>

然后，帮助程序将只检查会话变量：

  Template.body.helpers({
    displayLogin: function () {
      return Session.get('displayLogin');
    }
  });

并且，当用户单击以在2

之间切换时，会话变量被设置

      'click #loginButton': function () {
          Session.set("displayLogin", true);
    }    
  'click #registerButton': function () {
          Session.set("displayLogin", false);
    }

这样的事情是我最近使用自定义登录表单做的...虽然我在登录表单和实际应用程序之间切换，一旦他们登录...同样的想法......

你的html必须添加带有loginButton和registerButton的id的按钮或链接才能使用此示例

我刚刚开始使用流星，如果这是一个写得不好的例子，请原谅...

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

2 个答案: