Question

我构建了一个自定义表单，用于在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>

在我的js my for the template中，我使用jQuery .toggle（）来隐藏/显示在单击＃hide-show按钮时包装表单的div。当点击#create-account时，我也会调用Accounts.createUser。

首先，只要有一个包装输入的表单，当我调用Accounts.createUser时，整个页面似乎被重新呈现。至少所有原始显示等于none的元素都会被隐藏，无论它们在进行调用时是否具有当前显示属性。（我也尝试使用bootstrap模式。当我调用Accounts.createUser时，模态消失了。）但是，删除表单元素并且只是保留输入修复了这个问题（但是由于bootstrap期望输入被包装，所以打破了表单的css在形式元素中为某些行为）。

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

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

Answer 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变量中显示任何内容。我的注册template.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);
        }
    }
}

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

Answer 2

我遇到了同样的问题，事实证明我在高级模板的助手中使用Meteor.logginIn（）来显示加载页面。

即使Accounts.createUser失败，Meteor也会进入logginIn状态。当它这样做时，它会导致加载模板呈现，然后它返回到loggingIn状态并导致另一个模板呈现。因为它是本地托管的，并且没有连接延迟，所有这些都发生得如此之快，以至于你甚至从未看到加载模板渲染，只是为什么一切都只是闪烁和消失而感到困惑。

唯一的解决方案是在较低级别的模板上使用Meteor.logginIn（），该模板不会影响其余模板并导致它们重新渲染。

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

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

Meteor表单元素会导致重新呈现，并且在调用Accounts.createUser时不会保留输入

2 个答案: