Question

我使用两个模板做了一个示例代码。这些是：

登录模板 - 登录表单以及新用户按钮
注册模板 - 注册表

最初显示登录模板。所以在这里点击新用户！登录模板页面中的按钮然后立即显示到注册模板页面并隐藏登录模板页面。在重新注册模板页面点击注册按钮，如果成功注册然后显示登录模板页面和隐藏注册模板页面。我是{{1}的新用户}。所以请看下面的代码＆amp;建议我怎么办？

HTML代码：

Meteor

JS代码：

<head>
  <title>hcare</title>
</head>

<body>
  {{> login}}
</body>

<template name="login">
  <form id="login-form" action="action">
         <div> 
              <h2> Login<h2>
              <input type="text" id="username" placeholder="Enetr User Name" /><br>
              <input type="password" id="pwd" placeholder="Password" /><br>
              <input type="submit" value="Login" id="login" />
             <input type="submit" value=" New User!" id="register" />
          </div>
    </form>
</template>
<template name="registration">
         <form id="register-form" action="action">
         <div>
              <h2> Create Account<h2>
              <input type="text" id="username" placeholder="Enter UserName" /><br>
              <input type="text" id="name" placeholder=" Enter Name" /><br>
              <input type="text" id="email1" placeholder=" Enter Email" /><br>
              <input type="password" id="pwd1" placeholder=" Enter Password" /><br>
              <input type="submit" value="Register" id="register" />
          </div>
    </form>
</template>

Answer 1

我会开始添加Meteor Iron-Router软件包：

https://github.com/EventedMind/iron-router 阅读文档，我也是我的教程（http://manuel-schoebel.com/blog/iron-router-tutorial）。

然后您可以轻松设置两个不同的路由，一个用于登录，另一个用于注册Iron-Router。

然后，您可以简单地创建正常链接以从/ login切换到/ register。

Iron-Router让它变得非常简单，所以我强烈建议花一些时间并真正理解它是如何工作的（这并不难）。

顺便学习Meteor的好选择： - ）

在评论中回答您的问题：首先，您也应该在Windows上使用Iron-Router。但如果没有它，您可以根据会话呈现模板。

<body>
    {{> content}}
</body>

<template name="content">
    {{renderTemplate}}
</template>

内容助手

Template.content.helpers({
    'renderTemplate': function(){
        return new Handlebars.SafeString(Template[Session.get('currentTemplate')]({dataKey: 'someValue'})
    }
})

现在，内容模板应该是Session.get（'currentTemplate'）中呈现的模板。

如果有人点击，您可以直接更改Session变量：

Template.login.events({
    'click #register': function(evt, tpl){ Session.set('currentTemplate', 'registration');}
})

因为Session是一个被动数据源，并且它知道renderTemplate助手方法依赖于这个特定数据，所以它将重新运行renderTemplate函数。现在将呈现注册模板。

还要确保将客户端启动功能中的currentTemplate变量设置为“login”。（Session.set（'currentTemplate'，'login'））否则，最初不会显示任何内容，并且会发生错误。

这不是经过测试的代码，但它应该给你一个方向......甚至可以工作;-P

修改：

您也不希望您的输入#register按钮具有type =“submit”，使其为type =“button”，以便不会提交表单！您还可以添加到“click #register”事件处理程序：

evt.preventDefault()

只是为了确保不会提交表格。

Meteor中的动态加载模板

1 个答案: