All geek questions in one place

Getting started with Meteor: show / hide templates when clicked

I have two forms of the template on the first page for "Login" and one more "Register". I realized that you can use the Accounts package from the documentation. But it wasn’t possible to figure out how to switch between these two forms when the user clicks the “Login” or “Register” 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>
+6
source share
1 answer

Well, if you want to do this Meteor Path, there are two main options, and you need to decide which one works best:

a. you can insert the template you want to use into the placeholder using UI.insert and UI.render (or UI.renderWithData if you need data for visualization, for 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 only if a specific session is established, for 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
+7
source

Source: https://habr.com/ru/post/973915/

More articles:


All Articles