私の 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 でこのスクリプトへの参照を追加しても、登録初期化スクリプトが実行されていないように見えることです。理由はありますか？