我的 Ember 应用程序中有几个视图。我在注册视图中的观点之一。我用模板定义它。
我也在使用 jquery validate 插件,这样我就可以轻松地验证注册表单等表单。
为了让注册视图与验证一起工作,我在注册表单上添加了一个初始化验证的 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中添加了对这个脚本的引用。知道为什么吗?