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>

私の js では、テンプレート用に jQuery .toggle() を使用して、#hide-show ボタンがクリックされたときにフォームをラップする div を非表示/表示します。また、#create-account がクリックされたときに Accounts.createUser を呼び出します。

まず、入力をラップするフォームがある限り、Accounts.createUser を呼び出すとページ全体が再レンダリングされるようです。呼び出しが行われたときの現在の表示属性に関係なく、少なくとも元の表示が none に等しいすべての要素が非表示になります。(ブートストラップ モーダルでも試してみました。Accounts.createUser を呼び出すとモーダルが消えます。)ただし、フォーム要素を削除して入力をそのままにしておくと、この問題は解決します (ただし、ブートストラップは入力がラップされることを想定しているため、フォームの css が壊れます)。特定の動作のフォーム要素で)。

第二に、入力をラップするフォーム要素がなくても、Accounts.createUser がエラー (ユーザー名の取得など) を引き起こした場合、それらは保持されません。私は明らかに、ユーザーに登録情報の再入力を強制したくありません。preserve-inputs がインストールされていて、入力を {{#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 セッション変数にあるものを表示するだけです。私のサインアップ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);
        }
    }
}

したがって、ユーザーの作成が成功すると、サインアップモーダルが非表示になります。そうしないと、フォームにエラーが表示され、ユーザーはデータを失うことはありません。また、フォームを閉じても、データは再度開いても保持されます。

于 2013-04-16T17:03:28.843 に答える
0

私はこれと同じ問題を抱えていましたが、高レベルのテンプレートのヘルパーで Meteor.logginIn() を使用して読み込みページを表示していたことが判明しました。

Accounts.createUser が失敗しても、Meteor は loginIn 状態になるようです。その場合、読み込み中のテンプレートがレンダリングされ、loggingIn 状態から戻り、他のテンプレートがレンダリングされます。ローカルでホストされており、接続の待ち時間がないため、これらすべてが非常に高速に行われるため、読み込み中のテンプレートのレンダリングを見ることさえできず、なぜすべてがちらついて消えてしまうのか混乱したままになります.

唯一の解決策は、下位レベルのテンプレートで Meteor.logginIn() を使用することです。これは、残りのテンプレートに影響を与えず、それらを再レンダリングさせません。

アカウントの作成が成功しない限り、 Accounts.createUser は Meteor.loggingIn を true 状態に設定しないのが理想的です。

私は github ( Issue #1243 ) にイシューを提出しましたが、残念ながら、これが優先度の高い問題になるとは思っていません。

于 2013-07-25T06:35:14.940 に答える