Javascript Meteor中的动态加载模板
我使用两个模板编写了一个示例代码。它们是:Javascript Meteor中的动态加载模板,javascript,templates,meteor,Javascript,Templates,Meteor,我使用两个模板编写了一个示例代码。它们是: 登录模板-带有新用户按钮的登录表单 注册模板-注册表格 最初显示登录模板。因此,当您点击一个新用户时,请点击此处!登录模板页面中的按钮,然后立即显示到注册模板页面并隐藏登录模板页面。在重新注册模板页面中,如果成功注册,请单击注册按钮,然后显示到登录模板页面并隐藏注册模板页面。我是Meteor的新手。所以请看下面的代码&建议我怎么做 HTML代码: <head> <title>hcare</title> </
Meteor
的新手。所以请看下面的代码&建议我怎么做
HTML代码:
<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>
我将开始添加Meteor Iron路由器包: 阅读文档和我的《成为我的教程》() 然后,您可以轻松设置两个不同的路由,一个用于登录,另一个用于向Iron路由器注册 然后,您只需创建普通链接即可从/login切换到/register 铁路由器使它变得更加容易,所以我强烈建议花一些时间,真正了解它是如何工作的(它不是那么难) 顺便说一句,学习流星的好选择:-)
在评论中回答您的问题: 首先,你也应该在windows上使用Iron路由器。但如果没有它,则可以根据会话呈现模板
<body>
{{> content}}
</body>
<template name="content">
{{renderTemplate}}
</template>
现在,内容模板中应该是会话中呈现的模板。get('currentTemplate')
如果有人单击,您只需更改会话变量即可:
Template.login.events({
'click #register': function(evt, tpl){ Session.set('currentTemplate', 'registration');}
})
由于会话是一个反应式数据源,并且它知道renderTemplate助手方法依赖于此特定数据,因此它将重新运行renderTemplate函数。现在将呈现注册模板
还要确保将客户端启动函数中的currentTemplate变量设置为“login”。(Session.set('currentTemplate','login'))
否则一开始什么也不会出现,就会发生错误
这不是经过测试的代码,但它应该给你一个方向。。。甚至可能起作用-P
编辑:
您也不希望您的输入#注册按钮有type=“submit”,使其type=“button”,这样表单就不会被提交!您还可以向“单击#注册”事件处理程序添加以下内容:
evt.preventDefault()
只是为了确保表单不会被提交。我将开始添加Meteor Iron路由器包: 阅读文档和我的《成为我的教程》() 然后,您可以轻松设置两个不同的路由,一个用于登录,另一个用于向Iron路由器注册 然后,您只需创建普通链接即可从/login切换到/register 铁路由器使它变得更加容易,所以我强烈建议花一些时间,真正了解它是如何工作的(它不是那么难) 顺便说一句,学习流星的好选择:-)
在评论中回答您的问题: 首先,你也应该在windows上使用Iron路由器。但如果没有它,则可以根据会话呈现模板
<body>
{{> content}}
</body>
<template name="content">
{{renderTemplate}}
</template>
现在,内容模板中应该是会话中呈现的模板。get('currentTemplate')
如果有人单击,您只需更改会话变量即可:
Template.login.events({
'click #register': function(evt, tpl){ Session.set('currentTemplate', 'registration');}
})
由于会话是一个反应式数据源,并且它知道renderTemplate助手方法依赖于此特定数据,因此它将重新运行renderTemplate函数。现在将呈现注册模板
还要确保将客户端启动函数中的currentTemplate变量设置为“login”。(Session.set('currentTemplate','login'))
否则一开始什么也不会出现,就会发生错误
这不是经过测试的代码,但它应该给你一个方向。。。甚至可能起作用-P
编辑:
您也不希望您的输入#注册按钮有type=“submit”,使其type=“button”,这样表单就不会被提交!您还可以向“单击#注册”事件处理程序添加以下内容:
evt.preventDefault()
只是为了确保表单不会被提交。是的,但我在windows系统中工作,所以没有安装Iron Router软件包,这就是我问的原因。没有Iron Router,我能做什么?@dermanbo@user3213821您可能应该安装它,而不是自己去弄清楚如何复制它的功能。我得到了这个错误,即:
uncaughttypeerror:Property'undefined'of object#不是一个函数
,除了一切都可以正常工作之外。这个错误来自这一行,即返回新的handlebar.SafeString(模板[Session.get('currentTemplate')]({dataKey:'0'));)。因此,请帮助我如何解决此错误。@dermanbo.dataKey的用法是什么?@dermanbo{dataKey:'0'}是可选的,您也可以只传递({})。这是一种将数据注入模板的方法。如果执行{dataKey:'0'},则可以使用{{dataKey}}在模板中访问此项,它将呈现“0”。这只是一个额外的示例:)错误可能如下:模板[Session.get('currentTemplate')]必须是现有模板。因此,如果例如Session.get('currentTemplate')返回'null',则不能调用该模板。您可以确定是否在以下行之前添加:if(!Template[Session.get('currentTemplate')){return;}是的,但我在windows系统中工作,所以没有安装Iron Router软件包,这就是为什么我要问的。如果没有Iron Router,我能做什么?@dermanbo@user3213821,那么您可能应该安装它,而不是自己去弄清楚如何复制它的功能。我得到了这个错误,即:uncaughttypeerror:Property'undefined'of object#不是一个函数
,除了一切都可以正常工作之外。这个错误来自这一行,即返回新的handlebar.SafeString(模板[Session.get('currentTemplate')]({dataKey:'0'));)。因此,请帮助我解决此错误。@dermanbo.dataKey的用法是什么?@dermanbo{dataKey:'0'}是可选的,您也可以通过