在我的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;
}
流星方式(使用会话和#if)
首先,使用相同的2个事件,我们使用一些Sessions Variables,将其设置为true/false
session的值,如下所示。
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')
}
})
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句