如何在 Meteor 中添加 hide/show 元素？

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 会隐藏起来.但是，当我单击 "Create an account," 时，"login" div 应该消失，而 "register" div 应该出现。此时，如果我单击 "Log in"，则应该发生相反的情况。

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

有人知道如何做到这一点吗？

Answer 1

<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 必须添加 ID 为 loginButton 和 registerButton 的按钮或链接才能使此示例正常工作

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

Answer 2

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

简单的解决方案它使用 accounts-ui 包，只需使用

{{> loginButtons}} helper 到 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

流星之路（使用会话和#if）

首先使用相同的 2 个事件，我们使用一些会话变量，设置为 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 3

如果您正在使用 Bootstrap。尝试折叠。简单多了。

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Are you Registered?
  </button>
</p>
<div class="collapse" id="collapseExample">
  {{> login}}
</div>

如何在 Meteor 中添加 hide/show 元素？

How to hide/show element in Meteor?

javascript

login

meteor