0

我构建了一个自定义表单，用于在 Meteor 中创建新用户。

<button id="hide-show">Hide/show registration form</button>

<div class="wrapper" style="display:none">
  <form>
    // some inputs, each with an id.
  </form>
  <button id="create-account">Create account</button>
</div>

在我的模板中，我使用 jQuery .toggle() 在单击#hide-show 按钮时隐藏/显示包装表单的 div。单击#create-account 时，我还会调用 Accounts.createUser 。

首先，只要有一个包装输入的表单，当我调用 Accounts.createUser 时，整个页面似乎都会重新呈现。至少所有原始显示等于 none 的元素都会被隐藏，无论调用时它们的当前显示属性如何。（我也尝试过使用引导模式。当我调用 Accounts.createUser 时，模式会消失。）但是，删除表单元素并仅保留输入可以解决此问题（但会破坏表单的 css，因为引导程序希望输入被包装在某些行为的表单元素中）。

其次，即使我没有包装输入的表单元素，当 Accounts.createUser 导致错误（使用用户名等）时，它们也不会保留。我显然不想强迫用户重新输入他们的注册信息。我安装了保留输入，我什至尝试将输入包装在 {{#constant}} 中，但没有任何运气。

编辑：为了澄清，我在客户端上运行 Accounts.createUser。我不使用 Meteor.call 或任何其他方式调用它。

4

2 回答 2

1

您可以在成功创建帐户时将其隐藏，而不是立即隐藏 div。我做过类似的事情，它仍在进行中，希望对您有所帮助

我的注册模板：

<template name="SignUpForm">    
    <div id="signUpForm" class="modal hide fade">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Sign Up</h3>
        </div>
        <form><div class="modal-body" align="center">
            <input type="text" id="usernameSU" placeholder="Username" /><br />
            <input type="password" id="passwordSU" placeholder="Password" /><br />
            <input type="password" id="passconf" placeholder="Password" /><br />
            <input type="text" id="email" placeholder="You@Email.com" /><br />
            {{> CurErr}}
         </div>
         <div class="modal-footer">
                <a href="#" id="btnSignUp" class="btn btn-primary">Sign Up</a>
        </div></form> 
    </div>
</template>

CurErr 模板仅在引导警报中显示 curErr Session 变量中的任何内容。我的注册模板.js：

Template.SignUpForm.events({
'click #btnSignUp': function(e,t){
    signUpUser();
}
});

function signUpUser(){
    var password = $('#passwordSU').val();
    var passconf = $('#passconf').val();

    if (password !== passconf){
        Session.set('curErr', 'Password fields do not match');

    } else {
        var options = {
            username: $('#usernameSU').val(),
            password: $('#passwordSU').val(),
            email: $('#email').val(),
            profile: {}
        }



        try{
            //made a validation library, use your own validation logic here
            validate(options.username, 'username');
            validate(options.password, 'password');
            validate(options.email, 'email');

            Accounts.createUser(options, function(err){
                if(err){
                    Session.set('curErr', err.reason);
                }
                else
                    $('#signUpForm').modal('hide');
            });
        }catch(err){
            Session.set('curErr', err.reason);
        }
    }
}

所以我的注册模式会在成功创建用户时隐藏，否则我会在表单上显示错误并且用户不会丢失任何数据，如果表单关闭，数据在重新打开时仍会保留。

于 2013-04-16T17:03:28.843 回答
0

我遇到了同样的问题，结果证明我在高级模板的帮助程序中使用 Meteor.logginIn() 来显示加载页面。

即使 Accounts.createUser 失败，Meteor 似乎也会进入登录状态。当它执行时，它会导致加载模板呈现，然后它从 loggingIn 状态返回并导致另一个模板呈现。由于它在本地托管并且没有连接延迟，所有这一切都发生得如此之快，以至于您甚至看不到加载模板渲染，并且只是对为什么一切都闪烁和消失感到困惑。

唯一的解决方案是在不影响其余模板并导致它们重新渲染的较低级别模板中使用 Meteor.logginIn()。

理想情况下，除非帐户创建成功，否则 Accounts.createUser 不会将 Meteor.loggingIn 设置为 true 状态。

我在 github 上提交了一个问题（问题 #1243），但不幸的是，我不希望这是一个优先问题。

于 2013-07-25T06:35:14.940 回答