0

私の Ember アプリケーションにはいくつかのビューがあります。登録ビューでの私のビューの 1 つ。テンプレートで定義します。
登録フォームのようなフォームを簡単に検証できるように、jquery 検証プラグインも使用しています。
登録ビューをバリデーションで動作させるために、登録フォームでバリデーションを初期化する js スクリプトを追加しました。
アプリケーションを登録ビュー ( ) に直接ロードするとmyapp/index.html#/registration、検証が初期化され、正常に動作します。
問題は、アプリケーションを別のページ (myapp/index.html#/listたとえば) にロードし、ボタンを押して状態を登録に変更すると、検証が機能せず、空のフォームを送信することが可能です。
ロードされた最初のビューが登録ビューでない場合、何らかの理由で登録検証の初期化が機能しません。
理由はありますか?どうすればこれを解決できますか?

編集:ここにいくつかのコードがあります
これはビューです:

<script type="text/x-handlebars" data-template-name="registration">
        <form class="form-horizontal" id="registerForm">
            <fieldset>
                <legend>registration</legend>
                <div class="control-group">
                    <label class="control-label" for="user_name">User Name</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="user_name" name="user_name"/>
                    </div>
                </div>  
                <div class="control-group">
                    <label class="control-label" for="user_email">Email</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="user_email" name="user_email" title="Tooltip text"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="password">Password</label>
                    <div class="controls">
                        <input type="password" class="input-xlarge" id="password" name="password" title="Password tooltip"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="password_confirm">Password Confirmation</label>
                    <div class="controls">
                        <input type="password" class="input-xlarge" id="password_confirm" name="password_confirm" title="Confirmation tooltip">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label"></label>
                    <div class="controls">
                        <button type="submit" class="btn btn-success">Create Account</button>
                    </div>
                </div>
            </fieldset>
        </form>
    </script>

これは、登録ビューの初期化スクリプトです。

$(document).ready(function() {

    $("#registerForm input").tipsy({gravity: 'e'});

    // Validation
    $("#registerForm").validate({
        rules : {
            user_name : "required",
            user_email : {
                required : true,
                email : true
            },
            password : {
                required : true,
                minlength : 6
            },
            password_confirm : {
                required : true,
                equalTo : "#password"
            }
        },

        errorClass : "help-inline",
        errorElement : "span",
        highlight : function(element, errorClass, validClass) {
            $(element).parents('.control-group').removeClass('success');
            $(element).parents('.control-group').addClass('error');
        },
        unhighlight : function(element, errorClass, validClass) {
            $(element).parents('.control-group').removeClass('error');
            $(element).parents('.control-group').addClass('success');
        }
    });
}); 

これは、登録に関連するアプリ コードです。

App.RegistrationController = Em.Controller.extend();
App.RegistrationView = Em.View.extend({
    templateName: 'registration'
});
App.Router = Em.Router.extend({
    enableLogging: true,
    location: 'hash',

    root: Em.Route.extend({
        // EVENTS
        gotoList: Ember.Route.transitionTo('list'),
        gotoAbout: Ember.Route.transitionTo('about'),
        gotoPost: Ember.Route.transitionTo('post'),
        gotoRegistration: Ember.Route.transitionTo('registration'),

        // STATES
        index: Em.Route.extend({
            route: '/',
            redirectsTo: 'list'
        }),
        list: Em.Route.extend({
            route: '/list',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet('list');
            }
        }),
        about: Em.Route.extend({
            route: '/about',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet('about');
            }
        }),
        post: Em.Route.extend({
            route: '/post',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet('post');
            }
        }),
        registration: Em.Route.extend({
            route: '/registration',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet('registration');
            }
        })
    })
});

問題は、「#\list」にアクセスしてから登録に移動すると、HTML でこのスクリプトへの参照を追加しても、登録初期化スクリプトが実行されていないように見えることです。理由はありますか?

4

1 に答える 1

0

一見すると、dom の準備ができたときに検証スクリプトが実行されるように見えます。

そのため、最初に /registration を指定すると、フォームが表示され、準備が整うとスクリプトは正常に動作します。これは、すべてのフォーム要素が Dom に存在するためです。

しかし、最初に /list で入力すると、リストが表示され、dom の準備が整い、スクリプトが実行されます。しかし、すべての検証スタッフは、ページ上にない #registration を検索し、何もしません。その後、/registration に切り替えると、スクリプトは再度評価されません (基本的に、状態へのルーティングはページの更新とは異なり、dom を更新するだけです)。

didInsertElementRegistrationViewの関数内に検証コードを記述すれば、うまくいくと思います。

App.RegistrationView = Em.View.extend({
  templateName: 'registration',

  didInsertElement: function () {
    this.$("#registerForm input").tipsy({gravity: 'e'});
    // Validation
    this.$("#registerForm").validate({
      rules : {
        user_name : "required",
        user_email : {
           required : true,
           email : true
        },
        password : {
           required : true,
           minlength : 6
        },
        password_confirm : {
           required : true,
           equalTo : "#password"
        }
      },

      errorClass : "help-inline",
      errorElement : "span",
      highlight : function(element, errorClass, validClass) {
        $(element).parents('.control-group').removeClass('success');
        $(element).parents('.control-group').addClass('error');
      },
      unhighlight : function(element, errorClass, validClass) {
        $(element).parents('.control-group').removeClass('error');
        $(element).parents('.control-group').addClass('success');
      }
    });
  }
});

更新:これはほとんど機能するjsfiddleです。jquery-validationがどのように機能するのか正確にはわからないため、ほとんど機能しています。ただし、検証コードは実行されます。http://jsfiddle.net/Sly7/3JhzM/

于 2012-08-03T23:37:30.900 に答える