Backbone-validation.js 在子视图上

Question

我一直在关注 backbone 在线验证的在线示例：

到目前为止一切顺利，但现在我开始验证子视图，但它们无法正常工作。

我的代码如下所示：

var ScheduleModel = Backbone.Model.extend({
    validation: {
        StartDate: {
            required: true,
            fn: "isDate"
        },
        StartTime: [{
            required: true
        },
        {
            pattern: /^([0-2]\d):([0-5]\d)$/,
            msg: "Please provide a valid time in 24 hour format. ex: 23:45, 02:45"
        }],
        EndDate: {
            required: true,
            fn: "isDate"
        }
    },
    isDate: function (value, attr, computed) {
        if (isNaN(Date.parse(value))) {
            return "Is not a valid Date";
        }
    }
});
var ScheduleView = Backbone.View.extend({
    tagName: "div",
    template: _.template($("#scheduleAddTemplate").html()),
    render: function () {

        // append the template to the element
        this.$el.append(this.template(this.model.toJSON()));
        // set the schedule type
        var renderedInterval = SetScheduleType(this.model.attributes.ScheduleType.toLowerCase());
        // append to the interval
        $("#Interval", this.$el).append(renderedInterval.el);
        this.stickit();
        return this;
    },
    events: {

        "submit #NewScheduleForm": function (e) {
            e.preventDefault();
            if (this.model.isValid(true)) {
                this.model.save(null,
                {
                    success: function (schedule) {

                      //do stuff

                    }
                },
                { wait: true });
            }
        }
    },
    bindings: {
        "[name=ScheduleType]": {
            observe: "ScheduleType",
            setOptions: {
                validate: true
            }
        },
        "[name=StartDate]": {
            observe: "StartDate",
            setOptions: {
                validate: true
            }
        },
        "[name=StartTime]": {
            observe: "StartTime",
            setOptions: {
                validate: true
            }
        },
        "[name=EndDate]": {
            observe: "EndDate",
            setOptions: {
                validate: true
            }
        }
    },
    initialize: function () {
        Backbone.Validation.bind(this);
    },
    remove: function () {
        Backbone.Validation.unbind(this);
    }

});

我目前正在使用的可能间隔如下：

var MonthModel = Backbone.Model.extend({
    defaults: {
        DayOfMonth: 1,
        MonthsToSkip: 1
    },
    MonthsToSkip: {
        required: true,
        min: 1,
        msg: "Number must be greater than 1"
    },
    DayOfMonth: {
        required: function (val, attr, computed) {
            console.log(computed.ScheduleType);
            if (computed.ScheduleType === "monthly") {
                return true;
            }
            return false;
        }
    }
});
var MonthlyView = Backbone.View.extend({
    tagName: "div",
    attributes: function () {
        return { id: "Monthly", class: "inline co-xs-4" };
    },
    template: _.template($("#monthEditTemplate").html()),

    render: function () {
        // append the template to the element
        this.$el.append(this.template(this.model.toJSON()));
        this.stickit();
        return this;
    },
    bindings: {
        "[name=DayOfMonth]": {
            observe: "DayOfMonth",
            setOptions: {
                validate: true
            }
        },
        "[name=MonthsToSkip]": {
            observe: "MonthsToSkip",
            setOptions: {
                validate: true
            }
        }
    },
    initialize: function () {
        Backbone.Validation.bind(this);
    },
    remove: function () {
        Backbone.Validation.unbind(this);
    }
});

有谁知道为什么子视图没有验证？

Answer 1

找到方法了。发布它是如何完成的，以防其他人发现这个问题。我将只显示相关的代码位，而不显示所有绑定、初始化等。

var ScheduleView = Backbone.View.extend({
    render: function () {

        // this.Interval
        this.Interval = SetScheduleType(this.model.attributes.ScheduleType.toLowerCase(), this.model);
        // set the changed interval view
        $("#Interval", this.$el).append(this.Interval.render().el);

        this.stickit();
        return this;
    },

    events: {
        "change #NewScheduleForm": function (e) {
            // validate the subview when changes are made
            this.Interval.model.validate();
        },
        "change #ScheduleType": function (e) {
            e.preventDefault();
            var model = this.model;
            var newSchedType = e.target.value;
            this.model.attributes.ScheduleType = e.target.value;
            this.Interval = SetScheduleType(newSchedType, model);
            $("#Interval").html(this.Interval.render().el);
        },
        "submit #NewScheduleForm": function (e) {
            e.preventDefault();
            if ((this.model.isValid(true)) && (this.Interval.model.isValid(true))) {
                console.log("Success");
                this.model.save(null,
                {
                    success: function (schedule) {
                         //do stuff
                    }
                },
                { wait: true });
            }
        }
    }
    });

基本上我把子视图变成了主视图上的一个属性。我在主视图的任何更改和提交表单时手动调用子视图的验证。

Backbone-validation.js 在子视图上

Backbone-validation.js on Subview

validation

backbone.js

backbone-views

backbone-stickit