0

我的 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中添加了对这个脚本的引用。知道为什么吗?

4

1 回答 1

0

乍一看,您的验证脚本似乎是在 dom 准备好时执行的。

因此,如果您先使用 /registration,则会显示表单,准备就绪后,脚本可以正常工作,因为所有表单元素都存在于 Dom 中。

但是当你第一次输入 /list 时,它会显示列表,然后 dom 准备就绪,并且你的脚本被执行。但是所有验证内容都会搜索不在页面上的#registration,并且什么都不做。然后当你切换到/registration时,脚本不会再次被评估(基本上路由到一个状态不像刷新页面,只是更新dom)。

我认为如果您didInsertElement在 RegistrationView 的函数中编写验证代码,那么它应该可以工作。

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 回答