如何在流星中隐藏/显示元素?

禅本1126

在我的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(最终将包含一个表单),而“注册” div将不可见。但是,当我单击“创建帐户”时,“登录” div应该消失,而“注册” div应该出现。此时,如果我单击“登录”,则应该相反。

本质上,我只希望能够在同一页面的登录和注册表单之间进行切换。我已经使用{{#if}}和click事件进行了尝试,但这并不成功。

任何人都知道如何执行此操作?

乙烷

有一个简单的解决方案和一个硬代码解决方案可以实现此目的。

简单的解决方案的使用账户的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

流星方式(使用会话和#if)

首先,使用相同的2个事件,我们使用一些Sessions Variables,将其设置为true/falsesession的值,如下所示。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在流星中隐藏动态元素?

来自分类Dev

如何在AngularJS中显示隐藏的元素?

来自分类Dev

如何在单个div中显示和隐藏元素?

来自分类Dev

如何在动态数组中显示/隐藏 v-for 元素?

来自分类Dev

如何在JavaScript中隐藏多个元素?

来自分类Dev

如何在Javascript中隐藏元素

来自分类Dev

如何在DIV中隐藏特定的A元素

来自分类Dev

如何在设计器中隐藏元素?

来自分类Dev

如何在JComboBox中隐藏元素?

来自分类Dev

如何在画布中隐藏元素/对象?

来自分类Dev

如何在流星的body元素中添加CSS类?

来自分类Dev

如何在Android中显示webView和隐藏其他元素

来自分类Dev

如何在一个选择器jQuery中显示和隐藏多个元素?

来自分类Dev

如何在Android中显示webView和隐藏其他元素

来自分类Dev

如何在vim中显示隐藏字符?

来自分类Dev

如何在php中显示或隐藏标题

来自分类Dev

如何在YouTubePlayer中显示/隐藏字幕

来自分类Dev

如何在vim中显示隐藏字符?

来自分类Dev

如何在表单中显示/隐藏模型?

来自分类Dev

如何在HTML中使用href隐藏和显示元素

来自分类Dev

如何在鼠标悬停时显示/隐藏元素?

来自分类Dev

如何隐藏显示的元素内部?

来自分类Dev

在reactJS中显示/隐藏元素

来自分类Dev

显示/隐藏表格中的元素

来自分类Dev

隐藏/显示javascript中的元素

来自分类Dev

如何使用条件语句显示/隐藏车把中的html元素

来自分类Dev

如何使用条件语句显示/隐藏车把中的html元素

来自分类Dev

如何在TextView中显示<ruby>元素?

来自分类Dev

如何在JSP中显示SET的元素