backbone.js 유효성 검사를위한 사용자 정의 유효성 검사기

Question

backbone.validation plugin과 함께 Backbone.js를 사용하여 양식 입력에 입력 한 전자 메일 주소가 이미 사용되었는지 확인하는 custom validator을 작성합니다.

새로운 검사기가 emailAvailable라고하며 아래 볼 수 있습니다 (주의 :이 커피 스크립트,하지만 하단에 당신이 코드는 표준 자바 스크립트로 변환 찾을거야)

# ================================== 
#   MODELS 
# ==================================  
User = Backbone.Model.extend(

    urlRoot: "/user" 

    validation: 
     email: 
      fn: "emailAvailable" 

    emailAvailable: (value, attr, computedState) -> 
     // Ajax call to server (Play framework 2.2.1): returns the string "email available" if it doesn't find the email and returns the email address if it find it 
     checkEmail = $.ajax(jsRoutes.controllers.Signup.isEmailExists(value)) 
     checkEmail.done (msg) -> 
     emailFound = msg 
     if value is emailFound 
      return "already taken" 

     return 
) 

# ================================== 
#   VIEWS 
# ==================================  
SignUpView = Backbone.View.extend(
    initialize: -> 
     Backbone.Validation.bind(this) 

    el: "body" 

    events: 
     "change  input"  : "validateInput" 

    validateInput: (event) -> 
     input = $(event.currentTarget) 
     inputName = event.currentTarget.name 
     inputValue = input.val() 

     this.model.set(inputName, inputValue) 
     if this.model.isValid(inputName) 
      input.removeClass "error" 
      input.addClass "valid" 
     else 
      input.removeClass "valid" 
      input.addClass "error" 
... 

이 작동하지 않습니다 나는 이유를 알 수 없다. 내가 어디서 잘못한거야?

편집 : 코드는 슬프게도 비동기 검증 기능을 지원하지 않는 자바 스크립트

var SignUpView, User; 

User = Backbone.Model.extend({ 
    urlRoot: "/user", 
    validation: { 
    email: { 
     fn: "emailAvailable" 
    } 
    }, 
    emailAvailable: function(value, attr, computedState) { 
    var checkEmail; 
    checkEmail = $.ajax(jsRoutes.controllers.Signup.isEmailExists(value)); 
    checkEmail.done(function(msg) { 
     var emailFound; 
     emailFound = msg; 
     if (value === emailFound) { 
     return "already taken"; 
     } 
    }); 
    } 
}); 

SignUpView = Backbone.View.extend({ 
    initialize: function() { 
    return Backbone.Validation.bind(this); 
    }, 
    el: "body", 
    events: { 
    "change  input": "validateInput" 
    }, 
    validateInput: function(event) { 
    var input, inputName, inputValue; 
    input = $(event.currentTarget); 
    inputName = event.currentTarget.name; 
    inputValue = input.val(); 
    this.model.set(inputName, inputValue); 
    if (this.model.isValid(inputName)) { 
     input.removeClass("error"); 
     return input.addClass("valid"); 
    } else { 
     input.removeClass("valid"); 
     return input.addClass("error"); 
    } 
    } 
}); 

Answer 1

Backbone.Validation로 변환. 이것은 기본적으로 기본 백본 유효성 검사 흐름의 한계입니다. 동기식 검증 방식 만 염두에두고 설계되었습니다. 비동기를 지정

• :

  당신은 기본적으로 2 가지 옵션이 있습니다 아약스 호출

• 에 대해 false 옵션은이 사건에 대한 자신의 검증 흐름을 구현

나는 개인적으로 옵션 2로 갈 것

이후 동기식 아약스 호출은 호출이 완료 될 때까지 브라우저를 잠급니다.

업데이트 참고 :

나는이 질문에 대답 후 나는 빠른 구글 검색을했고, 비동기의 유효성을 검사 할 수 있도록합니다 Backbone.Validation에 대한 확장이 것 같습니다. 내가 어떤 방법으로 사용하거나 그것을 테스트하지 않았 음을 유의하시기 바랍니다 :

링크 : 당신은 당신의 비동기 확인 기능을 직접해야 할 것 https://github.com/suevalov/async.backbone.validation

Answer 2

합니다. 여기에 플러그인을 사용하지 않고, 약간의 로직과 좋은 코딩을 사용하여 수행 할 수있는 방법이 있습니다.

1) 모델을 저장하는 함수의 위치를 ​​시작합시다. 그런 다음에해야합니다)

this.model.asyncValidate(); 

3 :

this.asyncValidation = $.Deferred(); 

(2) 그런 다음 수동으로 사용자 정의 유효성 검사 함수를 호출해야합니다) : 절약이 발생하기 전에,이처럼 지연된 개체가 필요합니다 비동기 유효성 검사가 완료 될 때까지 기다리십시오.당신이 일을 끝낼되면, 당신의 모델을 저장 : 저장 모델

if (self.model.asyncValidateOK) { 

5) :

self.model.save(); 

을

$.when(this.checkDuplicatesFinished).done(function() { 

4) 자신의 비동기 검증의 결과가 자신의 모델 속성을 확인

this.asyncValidation = $.Deferred(); 
this.model.asyncValidate(asyncValidation); 
var self = this; 

$.when(this.checkDuplicatesFinished).done(function() { 
    if (self.model.asyncValidateOK) { 
     self.model.save(); 
    } 
}); 

: 여기

는 모두 코드입니다3210

이제 모델을 보겠습니다. 여기에 새로운 고객 확인 기능이 위치 할 곳이 있습니다. 꽤 간단합니다. 유효성 검증 결과와 유효성 검증 메소드 자체를 저장하기 위해 부울 변수가 필요합니다.

window.app.MyModel = Backbone.Model.extend({ 

    asyncValidateOK: true, 
    asyncValidate: function (defferedObject) { 
     var self = this; 
     var attrs = this.attributes; // a copy of the params that are automatically passed to the original validate method 
     $.get("someAsyncMethod", {}, function(result){ 

      // do your logic/validation with the results 
      // and tell the referred object you finished 
      if (true){ //validation ok (use your own logic) 

       self.asyncErrors = []; // no errors 
       self.asyncValidateOK = true; 
       deferredObject.resolve(); 

      } else { // validation not ok 

       self.asyncErrors.push(); 
       self.asyncValidateOK = false; 
       deferredObject.resolve(); 

      } 
     }); 
    } 
}); 

자세한 내용은 http://backbonejs.org/을 확인하십시오. 그러나 이와 관련된 내용은 없습니다. 이것이 비동기 검증을 시도하는 사람을 돕기를 희망합니다.