Meteor 中的动态加载模板答案

【问题标题】：Dynamic Loading Templates in MeteorMeteor 中的动态加载模板
【发布时间】：2014-02-22 16:37:25
【问题描述】：

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

登录模板 - 带有新用户按钮的登录表单
注册模板-注册表格

最初显示登录模板。所以当点击新用户时在这里！登录模板页面中的按钮，然后立即显示到注册模板页面并隐藏登录模板页面。在重新注册模板页面单击注册按钮，如果成功注册则显示到登录模板页面并隐藏注册模板页面。我是 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>

JS 代码：

if (Meteor.isClient) 
{
  Template.login.events
  ({
    'submit #login-form' : function (e,t)
     {
          // template data, if any, is available in 'this'

            console.log("You pressed the button LOGIN ");
            e.preventDefault();
            // retrieve the input field values
             var email = t.find('#email').value
            , password = t.find('#pwd').value;
              console.log(email);
             Meteor.loginWithPassword(email, password, function (err)
             {
                if (err) 
                {
                  console.log(err);
                  Session.set("loginError", true);
                 }
                 else
                 {
                   console.log(" Login Success ");
                 }
             });
        }


  });

  Template.registration.events
  ({
    'submit #register-form' : function (e,t)
     {

            console.log("You pressed the button Register ");
            e.preventDefault();
          var username = t.find('#username').value
            , name = t.find('#name').value
            , email = t.find('#email1').value
            , password = t.find('#pwd1').value;
            console.log("password="+password);
            //var email = trimInput(email);
            // var isValidPassword = function(val) 
             // {
                 // console.log("isValidPassword() "+val.length);
                 // return val.length >= 6 ? true : false; 
              // }
             console.log("email="+email);
             var isValidPassword = function(val, field)
             {
                if (val.length >= 6) {
                  return true;
                } else {
                  Session.set('displayMessage', 'Error &amp; Too short.')
                  return false; 
                }
             }

             if (isValidPassword(password))
             {
                console.log(" *** isValidPassword *** ");
                Accounts.createUser({email: email, password : password,username : username }, function(err)
                {
                   if (err) 
                    {
                      console.log(err);
                     alert(err.reason);
                    }
                    else
                    {
                       console.log("Register Successfully");
                    }
                });
             }

    }
  });


}


if (Meteor.isServer) 
{
  Meteor.startup(function () 
  {
    // code to run on server at startup


  });

}

【问题讨论】：

标签： javascript templates meteor

【解决方案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。但是没有它，您可以根据 Session 呈现模板。

<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 变量设置为“登录”。 (Session.set('currentTemplate', 'login')) 否则一开始什么都不会显示，并且会发生错误。

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

编辑：

您也不希望您的输入#register 按钮具有 type="submit"，将其设置为 type="button"，这样表单就不会被提交！您还可以将以下内容添加到您的“单击#register”事件处理程序中：

evt.preventDefault()

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

【讨论】：

是的，但是我在 Windows 系统中工作，所以没有安装 Iron-Router 包，这就是我问的原因。所以没有 Iron-Router 我能做什么？@DerMambo。
@user3213821 你应该安装它，而不是自己弄清楚如何复制它的功能。
我收到了这个错误，即：Uncaught TypeError: Property 'undefined' of object #<Object> is not a function 除了一切正常。这个错误出现在这一行，即 return new Handlebars.SafeString(Template[Session.get('currentTemplate') ]({dataKey: '0'})); 。所以请帮我解决这个错误。@DerMambo。
dataKey有什么用?.@DerMambo
{dataKey: '0'} 是可选的，您也可以只传递 ({})。这是一种将数据注入模板的方法。如果你这样做 {dataKey: '0'} 你可以在你的模板中使用 {{dataKey}} 访问它，它会呈现'0'。只是一个额外的例子 :) 错误可能如下： Template[Session.get('currentTemplate')] 必须是现有模板。所以如果例如。 Session.get('currentTemplate') 返回 'null' 你不能调用那个模板。您可以确定是否在该行之前添加： if(!Template[Session.get('currentTemplate')]){ return; }