Backbone Js - 验证插件没有正确调用函数

时间:2014-06-09 08:28:17

标签: jquery validation backbone.js

我正在做一个Backbone测试应用。我决定验证它。我正在使用着名的验证thedersen的骨干。验证,但它没有正常工作。这是我的来源,任何人帮我解决问题?

jQuery(document).ready(function($) {

    _.extend(Backbone.Validation.callbacks, { //is this wrong place?
        valid: function (view, attr, selector) {
            console.log("valide"); //i am not getting any console
        },
        invalid: function (view, attr, error, selector) {
           console.log('not valide'); //i am not getting any console
        }
    });



    var Person = Backbone.Model.extend({
        defualts : {
                    first_name : 'qwe',
                    last_name : 'ewq',
                    id : 0
        },
        validation: {
            first_name: {
              required: true,
              msg: 'Please enter a valid first_name'
            },
            last_name: {
              required: true,
              msg: 'Please enter a valid last_name'
            }
        }

    });

    var PersonCollection = Backbone.Collection.extend({
            model : Person
        });

    var idGen = 1;

    var PersonView = Backbone.View.extend({
        el : $("#personDisplay"),
        tmpl : _.template($("#personTemplate").html()),
        editTmpl : _.template($("#editPersonTemplate").html()),
        initialize:function(){

        },
        render : function() {
            if (this.model.id != 0) {
                    $(this.el).append(this.tmpl(this.model.toJSON()));
            } else {
                    $(this.el).append(this.editTmpl(null));


               }

//when below uncommitted it works, but i am getting 3 consoles.

                // var isValid = this.model.isValid('first_name');  
                // console.log('isValid', isValid);
        }
    });         

     var PersonMasterView = Backbone.View.extend({

            el : $("#displayForm"),
            editTmpl : _.template($("#editPersonTemplate").html()),

            events : {
                    "click #addUser" : "addUsr",
                    "click #save" : "add"
            },

            initialize : function() {

                    this.collection = new PersonCollection();
                    this.render();
                    Backbone.Validation.bind(this);
            },

            render : function() {
                    //
                    $("#personDisplay").html('');

                    _.each(this.collection.models, function(item) {
                            //alert('collection iteratin->'+item.id);
                            var perView = new PersonView({
                                    model : item
                            });
                            perView.render();
                    }, this);

            },

            add : function(e) {
                    e.preventDefault();
                    idGen = idGen + 1;
                    var data = (Backbone.Syphon.serialize(this));
                    var that = this;
                    data.id = idGen;
                    // console.log(data);
                    this.collection.add(data);
                    this.render();
            },

            addUsr : function() {
                    var prsn = new Person({
                            id : 0
                    });
                    this.collection.add(prsn);
                    this.render();
            }
    });

    var pView = new PersonMasterView();
    Backbone.Validation.bind(pView);

});

1 个答案:

答案 0 :(得分:0)

我更新了这样的代码:工作正常。感谢所有

var PersonView = Backbone.View.extend({
        el : $("#personDisplay"),
        tmpl : _.template($("#personTemplate").html()),
        editTmpl : _.template($("#editPersonTemplate").html()),
        initialize:function(){
            Backbone.Validation.bind(this);
        },
        render : function() {

            var status = this.model.isValid(true);

            if (this.model.id != 0) {
                    $(this.el).append(this.tmpl(this.model.toJSON()));
            } else {
                    $(this.el).append(this.editTmpl(null));
            }
        }
    });