Backbone.js model.isValid（）方法不返回false爲一個無效的模型

Question

所以我試圖從我的模型得到驗證，實際上禁用保存按鈕，但重新驗證何時包括新的輸入。任何人都知道嘗試這種方法的最佳方式。謝謝！我用我的方法的問題是，一旦它被禁用它不會返回狀態。

這裏的main.js文件

(function() { 
    window.App = { 
     Models: {}, 
     Collections: {}, 
     Views: {}, 
     Templates: {}, 
     Router: {} 

    }; 

    // MODEL 
    App.Models.User = Backbone.Model.extend({ 
     defaults: { 
      firstName: 'first', 
      lastName: 'last', 
      email: 'Email', 
      phone: '222', 
      birthday: '07/22/1980' 
     }, 

     validate: function (attrs) { 

      if (!attrs.firstName) { 
       return 'You must enter a real first name.'; 
      } 
      if (!attrs.lastName) { 
       return 'You must enter a real last name.'; 
      } 
      if (attrs.email.length < 5) { 
       return 'You must enter a real email.'; 
      } 
      if (attrs.phone.toString().length < 10) { 
       //&& attrs.phone === int 
       return 'You must enter a real phone number, if you did please remove the dash and spaces.'; 
      } 
      // if (attrs.birthday.length < 2) { 
      // return 'You must enter a real city.'; 
      //} 
     }, 

     initialize: function() { 
      this.on('invalid', function (model, invalid) { 
       console.log(invalid); 
       alert(invalid); 
      }); 
     } 

    }); 

    //var userModel = new App.Models.User(); 

    //VIEW 
    App.Views.User = Backbone.View.extend({ 
     el: '#user', 
     //model: userModel, 
     //tagName: 'div', 
     //id: 'user', 
     //className: 'userProfile', 
     //template: _.template($("#userTemplate").html()), 
     //editTemplate: _.template($("#userEditTemplate").html()), 


     initialize: function(){ 

     }, 

     render: function() { 
      this.template = Handlebars.compile($("#userTemplate").html()); 
      this.editTemplate = Handlebars.compile($("#userEditTemplate").html()); 

      this.$el.html(this.template(this.model.toJSON())); 
      return this; 
     }, 

     events: { 
      'click button.edit': 'editProfile', 
      'click input.save': 'saveEdits', 
      'click button.cancel': 'cancelEdits' 
     }, 

     editProfile: function() { 
      this.$el.html(this.editTemplate(this.model.toJSON())); 

     }, 

     saveEdits: function() { 
      var form = $(this.el).find('form#updateUser'); 
      this.model.set({ 

       firstName : form.find('.firstName').val(), 
       lastName : form.find('.lastName').val(), 
       email: form.find('.email').val(), 
       phone: form.find('.phone').val(), 
       birthday: form.find('.birthday').val() 

      }, {validate: true}); 

     if(!this.model.isValid()) { 
      console.log('run'); 
      $('.save').attr("disabled", "disabled"); 

     } else { 
      console.log('run2'); 
      alert('Changes have been made.'); 
      $('.save').removeAttr("disabled"); 
      return this.render(); 
     } 


    }, 


     }, 

     cancelEdits: function() { 
      this.render(); 
     } 

    }); 
    //start history service 
    Backbone.history.start(); 

    var user = new App.Views.User({model: new App.Models.User()}); 
    user.render(); 
})(); 

這裏是玉文件：

extends layout 
block content 
    div.centerContent 

     h4 User goes here with equal before it no space 
      div#user 
       p #{firstName} #{lastName} 
       p #{email} 
       p #{phone} 
       p #{birthday} 
       button.edit Edit 

     script(id="userTemplate", type ="text/template") 
       p {{firstName}} {{lastName}} 1 
       p {{email}} 2 
       p {{phone}} 3 
       p {{birthday}} 4 
       button.edit Edit 

     script(id="userEditTemplate", type ="text/template") 
      div 
       form(action="#")#updateUser 
        input(type="text", class="firstName", value='{{firstName}}') 
        input(type="text", class="lastName", value='{{lastName}}') 
        input(type="email", class="email", value='{{email}}') 
        input(type="number", class="phone",, value='{{phone}}') 
        input(type="date", class="birthday", value='{{birthday}}') 
       input(type="submit", value="Save").save Save 
       button.cancel Cancel 
     hr 
     script(type="text/javascript", src="/js/main.js") 

Answer 1

這裏的問題是，你調用{ validate: true }選項將model.set方法，然後您隨後致電model.isValid()。

當您撥打model.set並將validate選項設置爲true時，Backbone.js將不會設置您通過的屬性，除非它們全部通過驗證。因此，在您撥打model.isValid()時，型號已更改回以前的版本（在撥打.set之前）。 model.isValid()自動調用model.validate()方法並將模型的當前屬性傳遞給它。

在您的例子，被傳遞到validate值由isValid方法是模型的電流（有效）屬性。因此，isValid()總是要驗證爲真。這會導致你永遠達不到你的else條款。

這裏的解決方案，而不是調用isValid，看看你的模型是有效的（通過validate: true到set方法之後）檢查model.validationError值。如果model.validationError是一個真值，那麼你知道你的模型是無效的。

下面是一個JSFiddle的例子，說明如何做到這一點，以及一些文檔。