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

【问题标题】：How to hide/show element in Meteor?如何在 Meteor 中隐藏/显示元素？
【发布时间】：2021-11-25 22:27:14
【问题描述】：

在我的 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 应该会消失，而“注册”div 应该会出现。此时，如果我单击“登录”，则应该会发生相反的情况。

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

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

【问题讨论】：

您可以通过 {{#if}} 和助手的组合来执行此操作。你能更具体地说明你想要什么吗？

标签： javascript login meteor

【解决方案1】：

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

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

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

【讨论】：

第二个解决方案完美！我尝试了多种帮助格式来将 #if 变量设置为 true 和 false，但这是唯一有效的。谢谢！

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

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

【讨论】：

【解决方案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>

【讨论】：