Question

我在页面中有两个模板表单，一个用于“登录”，另一个用于“注册”。理解使用文档中的Accounts包。但是当用户点击“登录”链接或“注册”链接时，无法弄清楚如何在这两种形式之间切换？
代码：

<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>

Answer 1

好吧，如果你想这样做＆＃34; The Meteor Way＆＃34;有两个基本选项，您需要确定最适合您需要的选项：

一个。您可以使用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：您可以在模板中使用基于会话的条件，并将其命令仅在设置某个会话时显示，例如：

 <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入门：点击显示/隐藏模板

1 个答案: