Ember - 驗證在不同頁面上啓動應用程序時不起作用

Question

我的Ember應用程序中有幾個視圖。我在註冊視角中的一種觀點。我用一個模板來定義它。
我也使用jquery驗證插件，以便我可以像註冊表單一樣容易地驗證表單。
爲了讓註冊視圖與驗證一起工作，我添加了一個js腳本，用於在註冊表單中初始化驗證。
當我將我的應用程序直接加載到註冊視圖（myapp/index.html#/registration）時，驗證初始化並正常工作。
問題是，當我加載應用到不同頁（myapp/index.html#/list例如），然後按下按鈕的變化的狀態下，以註冊，則驗證不工作和sumbitting空形式是可能的。
由於某些原因，當加載的第一個視圖不是註冊視圖時，註冊驗證初始化不起作用。
任何想法爲什麼？我該如何解決這個問題？

編輯：下面是一些代碼
這是視圖：

<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中添加了對此腳本的引用。任何想法爲什麼？

Answer 1

乍一看，您的驗證腳本似乎在dom準備就緒時執行。

所以，如果你先用/登記，則顯示的形式，並在準備好時，腳本正常工作，因爲所有的表單元素都出現在大教堂。

但當你第一次用/列表中輸入，它顯示的列表，然後DOM已準備就緒，並執行腳本。但是所有的驗證工具都會搜索#registration，它不在頁面上，一無所獲。然後，當你切換到/註冊時，腳本不再被評估（基本上路由到一個狀態不像刷新頁面，但只更新dom）。

我認爲，如果你寫的RegistrationView的didInsertElement函數內部的驗證代碼，那麼它應該工作。

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的驗證工作。但驗證代碼已執行。 http://jsfiddle.net/Sly7/3JhzM/