Meteor 入门:单击时显示/隐藏模板
[英] Getting started with Meteor: Show/Hide Templates on click
本文介绍了Meteor 入门:单击时显示/隐藏模板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在一个页面中有两个模板表单，一个用于登录"，另一个用于注册".了解使用文档中的 Accounts 包.但是无法弄清楚当用户单击登录"链接或注册"链接时如何在这两种形式之间切换?
代码:
<div class="blog-masthead"><div class="容器"><nav class="blog-nav"><a class="blog-nav-item" href="#">首页</a><a class="blog-nav-item active" href="#">登录</a><a class="blog-nav-item active" href="#">注册</a><a class="blog-nav-item" href="#">关于</a></nav>
{{>签到表}}<模板名称="signInForm"><div class="容器"><form class="form-signin" role="form" id="signInForm"><h2 class="form-signin-heading">请登录</h2><input type="email" class="form-control" placeholder="Email address" required="" autofocus="" id="login-email"><input type="password" class="form-control" placeholder="Password" required="" id="login-password"><div class="row"><label class="remember-me"><input type="checkbox" name="remember-me" value="remember-me" id="remember-me" >记得我<a href="#" class="pull-right">忘记密码</a>
<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button><p class="text-left">第一次使用?<a href="#">注册</a></p></表单>
<模板名称=signUpForm"><div class="容器"><form class="form-signin" role="form" id="signUpForm"><h2 class="form-signin-heading">请注册</h2><input type="text" class="form-control" placeholder="Name" required="" autofocus="" id="signup-name"><input type="email" class="form-control" placeholder="Email address" required="" autofocus="" id="signup-email"><input type="password" class="form-control" placeholder="Password" required="" id="signup-password"><button class="btn btn-lg btn-primary btn-block" type="submit">注册</button><p class="text-left">已有账号?<a href="#">登录</a></p></表单>
解决方案
好吧，如果你想做流星之路"，有两个基本选项，你需要决定哪一个最适合你的需要:
一个.您可以使用 UI.insert 和 UI.render(或 UI.renderWithData，如果您需要呈现数据，例如:
)将您要使用的模板注入到占位符中
UI.insert(UI.render(Template.name), document.body)UI.insert(UI.renderWithData(Template.foo, {bar: "baz"}), document.body)
b:您可以在模板中使用基于 Session 的条件，并命令它仅在设置了某个 Session 时出现，例如:
<模板名称="signInForm"><div class="signUp">单击我以显示注册表单</div><div class="容器">{{#with userPressedSignUp}}<form class="form-signin" role="form" id="signUpForm">.. 表单元素..</表单>{{/和}Template.signInForm.userPressedSignUp = ->返回 Session.get 'signUp-visible'模板.signInForm.events'点击 .signUp':(事件)->Session.set 'signUp-visible', trueSession.set 'signUp_visible', false# 模板不会显示with"的内容，只要session# 变量为false"，当您希望表单出现时，通过单击signUp"div 来更改它
I have two template forms in a page one for "Log In" and another "Sign Up". Understood to use Accounts package from documentation. But could not figure out how to toggle between these two forms when user clicks on "Log In" link or "Sign Up" link?
Code:
<body>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item" href="#">Home</a>
<a class="blog-nav-item active" href="#">Login</a>
<a class="blog-nav-item active" href="#">Sign Up</a>
<a class="blog-nav-item" href="#">About</a>
</nav>
</div>
</div>
{{> signInForm}}
</body>
<template name="signInForm">
<div class="container">
<form class="form-signin" role="form" id="signInForm">
<h2 class="form-signin-heading">Please Log in</h2>
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="" id="login-email">
<input type="password" class="form-control" placeholder="Password" required="" id="login-password">
<div class="row">
<label class="remember-me">
<input type="checkbox" name="remember-me" value="remember-me" id="remember-me" > Remember me
</label>
<a href="#" class="pull-right">Forgot Password</a>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
<p class="text-left">First time user? <a href="#">Register</a></p>
</form>
</div>
</template>
<template name="signUpForm">
<div class="container">
<form class="form-signin" role="form" id="signUpForm">
<h2 class="form-signin-heading">Please sign up</h2>
<input type="text" class="form-control" placeholder="Name" required="" autofocus="" id="signup-name">
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="" id="signup-email">
<input type="password" class="form-control" placeholder="Password" required="" id="signup-password">
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign Up</button>
<p class="text-left">Already have account? <a href="#">Login</a></p>
</form>
</div>
解决方案
Well, if you want to do it "The Meteor Way" there are two basic options and you need to decide which suits your need best:
a. you can inject the template you want to use to a placeholder using UI.insert and UI.render (or UI.renderWithData if you need data to be rendered, example:
UI.insert(UI.render(Template.name), document.body)
UI.insert(UI.renderWithData(Template.foo, {bar: "baz"}), document.body)
b: you can use Session based conditions in your template and order it to appear only when a certain Session is set, example:
<template name="signInForm">
<div class="signUp"> click me to make the sign up form appear</div>
<div class="container">
{{#with userPressedSignUp}}
<form class="form-signin" role="form" id="signUpForm">
.. form elements..
</form>
{{/with}
</template>
Template.signInForm.userPressedSignUp = ->
return Session.get 'signUp-visible"
Template.signInForm.events
'click .signUp': (event) ->
Session.set 'signUp-visible', true
Session.set 'signUp_visible', false
# The template will not show the contents of the "with" as long as the session
# variable is 'false', change it by clicking on "signUp" div when you want the form to appear
这篇关于Meteor 入门:单击时显示/隐藏模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
