2014-06-11 7 views
0

사용자 이름과 비밀번호를 간단하게 확인하고 있습니다. 내 모델은 여기에 있습니다 :

define(["backbone"], function(Backbone){ 
    var LoginModel = Backbone.Model.extend({ 
     url:'/home', 
     defaults:{ 
       userName:'', 
       password:'' 
     }, 
     initialize:function(){ 
      this.bind("change", this.attributesChanged); 
     }, 
     validate:function(attrs){ 

      var errors = []; 
      if(attrs.userName < 5){ 
       errors.push({"name": 'userName', "message": 'Please fill email field.'}); 
      } 
      if(!attrs.password){ 
       errors.push({"name": 'password', "message": 'Please fill feedback field.'}); 
      } 
      return errors.length > 0 ? errors : false; 
     }, 
     attributesChanged : function(){ 
      var valid = false; 
      if (this.get('userName') && this.get('password')) { 
       valid = true; 
       this.trigger("validated", valid); 
      }   
      else { 
       this.trigger('invalid', valid); //triggers the invalid works fine. 
      } 
     } 

     }); 

    return LoginModel; 
}); 

그러나

가보기에, 나는 아직도 그 방아쇠를 얻고있다,하지만 난 입력 강조 뷰의 요소를 얻을 수 아니에요 : 여기

를 내보기 :

define([ 
    'jQuery','underscore', 
    'backbone','marionette', 
    'text!./templates/loginView.html'], 
    function($,_,Backbone,Marionette,template){ 
     "use strict"; 

     var LoginView = Backbone.Marionette.ItemView.extend({ 

      className:'col-xs-12 col-md-4 col-md-offset-4', 

      template:_.template(template), 

      events:{ 
       "submit form" : "loginSubmit" 
      }, 

      initialize:function(params){ 
       this.model.view = this; 
       this.model.bind("validated", this.validated); 
       this.model.bind("invalid", this.showErrors); 
      }, 

      loginSubmit:function(e){ 

       e.preventDefault(); 
       var form = e.target, 
        data = Backbone.Syphon.serialize(form); 

       var that = this; 

       var options = { 
        success: function (model,response) { 
         if(response){ 
          console.log('success', response) 
         } else { 
          console.log('failed') 
         } 
        }, 
        error: function(model, options){ 
         console.log("error", xhr.responseText); 
        } 
       }; 

       this.model.save(data, options); 
       // this.model.on('invalid', function(model, error) { console.log(model,'\n', error); }) 
      }, 

      validated:function(value){ 
       console.log(value); 
      }, 

      showErrors:function(model, error){ 
       var form = this.$el.find('form'); // i am not able to get form element here... what is the issue? 
       _.each(error, function(value, key){ 
        var input = form.find('input[name='+value.name+']').addClass('error'); 
        input.after('<span class="errorMsg">'+value.message+'</span>'); 
       }); 
      }, 

      hideErrors:function(msg){ 
       console.log('login success!'); 
      }, 

      onShow:function(){ 
       $('input:text').first().select(); 
      } 

     }); 

     return LoginView; 
    } 
); 

그리고 나는이 부분에서 혼란 스러워요은, 어떤 날 uderstand하는 데 도움이 :

1) 어떻게 differenciate하는 여부 '검증'방식이나 '서버'

에서 오류

2)이 두 가지 문제를 올바르게 처리하는 방법은 무엇입니까?

3) 여기에 게시 된 올바른 접근 방식은 무엇입니까?

나는이 분야에서 경험이 없기 때문에 어떤 전문가라도 내 응용 프로그램 개발을 계속할 수 있습니까?

내 책을 직접 읽지 마십시오. 제 코드에서 배울 수 있도록 도와주세요. 미리 감사드립니다. !

답변

3

내가 아래에 질문에 대답하는거야 :

invalid 이벤트가 (당신이 속성의 set에 확인할 수 있기 때문에 사용을 고려할 수 있음) validate에서 트리거
  1. . error 이벤트는 응답이 서버에서 오는 경우 트리거됩니다.
  2. validate은 서버에 정보를 보내지 않습니다. 찾고있는 응답 인 경우이를 사용해야합니다.
  3. 당신이 가지고있는 것은 꽤 좋습니다.

은 여기 참조 문제를 해결하는 방법은 다음과 같습니다 대신이의

를보기의 initialize :

initialize:function(params){ 
    this.model.view = this; 
    this.model.bind("validated", this.validated); 
    this.model.bind("invalid", this.showErrors); 
} 

당신은 수행해야합니다

initialize:function(params){ 
    this.model.view = this; 
    this.listenTo(this.model, "validated", this.validated); 
    this.listenTo(this.model, "invalid", this.showErrors); 
} 

을 보장하는 보기가 닫히면 이벤트가 Remo가됩니다. ved. 또한 메소드의 this이 사용자의 뷰를 참조하는지 확인합니다. 지금은 귀하의 모델을 참조합니다. this.$ - - this.$el.find 같은 당신이 find보기 내에서 선택하려는 경우에도

, 그냥 옆으로, 바로 가기가 있습니다.