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()总是要验证为true.这将导致你永远不会达到你的else条款.

这里的解决方案不是调用isValid你的模型是否有效(在传递validate: true给set方法之后)检查值model.validationError.如果model.validationError是真值,那么您就知道您的模型无效.

这是一个JSFiddle,其中包含一些如何执行此操作的示例,以及一些文档.