在我的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}}和点击事件尝试了这一点,但这没有成功。
任何人都知道如何做到这一点?
答案 0 :(得分:9)
有一个简单的解决方案和硬编码解决方案来实现这一目标。
简易解决方案使用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
答案 1 :(得分:3)
<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的按钮或链接才能使用此示例
我刚刚开始使用流星,如果这是一个写得不好的例子,请原谅...