保存错误时的主干收集

Question

我正在尝试获取它，以便当我的骨干集合正在保存时，如果它遇到错误，我可以用它做一些事情。但是，当保存表单时，总是会触发呈现所有任务按钮的单击事件。如果发现错误，如何让它停止迭代集合？否则我怎样才能让它调用失败函数？

var EditTaskView = AddTaskView.extend({
    template: _.template($("#individualTaskEditView").html()),
     events: {

            "submit": function (e) {
                e.preventDefault();

                if (this.model.isValid(true) && this.ScheduleView.isValid() && this.ProviderView.isValid()) {
                    $.when(this.model.save(), this.FiltersView.saveAll())
                        .done(function () {
                            $("#RenderAllTasks").trigger("click");
                        })
                    .fail(function (xhr, status, errorMessage) {
                        var message = JSON.parse(xhr.responseText).Message;
                        RenderError(message, "#EditTaskDetailsTabError");
                    });
                }
            }

        }
};

var FieldCollectionAddView = Backbone.View.extend({
    tagName: "div",
    render: function () {
        // iterate the collection
        this.collection.each(function (field) {
            // render the view and append to the collection
            var view = new FieldAddView({ model: field });
            var rendered = view.render();
            this.$el.append(rendered.el);
        }, this);
        return this;
    },
    isValid: function () {
        var valid = true;
        _.each(this.collection.models, function (model) {
            if (!model.isValid(true)) {
                valid = false;
            }
        });
        return valid;
    },
    saveAll: function () {
        var errorsFound = false;
        _.each(this.collection.models, function (model) {
            model.save(null, {
                error: function (error) {
                    //TODO: do soemthing with the error
                    var message = JSON.parse(el.responseText).Message;
                    RenderError(message, "#ProviderDetailsTabError");
                }
            }, { wait: true });
        });
        return errorsFound;
    }
});

var ProviderAddView = Backbone.View.extend({
    tagName: "div",
    template: _.template($("#providerAddTemplate").html()),
    render: function () {
        // append the template to the element
        this.$el.append(this.template);
        //render provider types
        this.ProviderTypes = RenderProviderTypes(this.model.attributes.ProviderTypes);

        var providerTypesDiv = _.template($("#ProviderTypesTemplate").html());

        $("#ProviderTypesDiv", this.$el).html(providerTypesDiv);
        $("#ProviderTypesSelectDiv", this.$el).html(this.ProviderTypes.render().el);
        $("#ProviderTypes", this.$el).val(this.model.attributes.ProviderType);

        // render field collection
        var collection = new FieldCollection(this.model.attributes.ProviderFieldList);
        var fieldsView = new FieldCollectionAddView({
            collection: collection
        });
        this.FieldsAddView = fieldsView;
        // append the fields to the element
        $("#fieldsDiv", this.$el).append(fieldsView.render().el);


        this.stickit();
        return this;
    },
    events: {
        "submit #NewProviderForm": function (e) {
            e.preventDefault();
            if (this.FieldsAddView.isValid()) {
                var fieldsView = this.FieldsAddView;
                this.model.save(null, {}, { wait: true })
                    .success(function (result) {
                        var filters = new FilterCollection();
                        $.when(fieldsView.saveAll(),
                            filters.fetch({
                                data: $.param({
                                    taskId: result.attributes.TaskId
                                })
                            }))
                            .done(function() {
                                if (!$("#FiltersForm").html()) {
                                    var view = new FilterCollectionView({ collection: filters });
                                    assign(view, "#FilterDetails");
                                    $("#FiltersForm").append(buttonsTemplate);

                                    $("#FilterDetailsTab").parent("li").removeClass("disabled");
                                    $("#FilterDetailsTab").attr("data-toggle", "tab");
                                }
                                $("#FilterDetailsTab").tab("show");
                            });
                        })
                        .error(function (xhr, el, other) {
                            var message = JSON.parse(el.responseText).Message;
                            RenderError(message, "#ProviderDetailsTabError");
                        });
                    }
                }
        },
        isValid: function () {
            return this.model.isValid(true) && this.FieldsAddView.isValid();
        },
        save: function () {
            this.model.save();
            this.FieldsAddView.saveAll();
        }

    });

Answer 1

好的，所以我发现了如何做到这一点。简而言之，必须更改代码，以便使用 Backbone.sync 一次同步整个集合，而不是遍历它并单独保存每个模型。此外，当您准备好保存集合时，您可以使用 $.when 函数，以便在决定做什么之前完成整个同步。以下是显示所做更改的相关代码。

var FieldCollection = Backbone.Collection.extend({
    url: "/api/Field",
    model: FieldModel,
    syncAll: function () {
        return Backbone.sync("create", this)
            .error(function (xhr, el, other) {
                var message = JSON.parse(xhr.responseText).Message;
                var tab = "";
                var activeTab = $("#Tabs li.active a").attr("id");
                if (activeTab === "TaskListTab") {
                    tab = "#EditTaskDetailsTabError";
                }
                else if (activeTab === "NewTaskTab") {
                    tab = "#ProviderDetailsTabError";
                }
                RenderError(message, tab);
            });
    }
});

var FieldCollectionAddView = Backbone.View.extend({
    saveAll: function () {
        return this.collection.syncAll();
    }
});

var ProviderAddView = Backbone.View.extend({
    events: {
        "submit #NewProviderForm": function (e) {
            e.preventDefault();
            if (this.FieldsAddView.isValid()) {
                var fieldsView = this.FieldsAddView;
                        $.when(fieldsView.saveAll())
                            .done(function() {
                                // success
                            });
                    }

            }

    }
});