0

オンラインでのバックボーン検証のオンライン例に従っています。

http://jsfiddle.net/thedersen/c3kK2/

これまでのところは順調ですが、サブビューの検証に取り掛かっていますが、機能していません。

私のコードは次のようになります。

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);
    }
});

サブビューが検証されない理由を誰かが知っていますか?

4

1 に答える 1

0

それを行う方法を見つけました。他の誰かがこれに問題を見つけた場合に備えて、それがどのように行われたかを投稿します。すべてのバインディング、ect の初期化を行わずに、関連するコードのみを示します。

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 });
            }
        }
    }
    });

基本的に、サブビューをマスター ビューの属性に変えました。マスタービューへの変更とフォームの送信時に、サブビューの検証を手動で呼び出します。

于 2016-10-16T05:19:50.487 に答える