javascript - Backbone Marionette 复合 View 的每个项目 View 都有一个表单。如何在每次提交成功后使用 jQuery deferred 做一些事情

Question

我有一个 Backbone Marionette 复合 View ，其中每个子项 View 都有自己的表单。

var DependentsFormFields = Backbone.Marionette.CompositeView.extend({
    template: 'dependents_form_fields_wrapper',
    itemViewContainer: '#dependents',
    itemView: DependentsFormFields,
    events: {
        "click #save-dependent-section" : "saveSection"
    },
    saveSection: function(event) {
        event.preventDefault();

        this.children.each(function(childView){
            childView.submitForm();
        });
    }
});

var DependentsFormFields = Backbone.Marionette.ItemView.extend({
    template: 'dependent_form',
    submitForm: function() {
        var _this = this;

        var data = Backbone.Syphon.serialize(_this);

        _this.model.save(data, {
            url: _this.model.urlRoot,
            success: function() {
                App.Components.Form.ErrorHandler.removeErrors({
                    view: _this
                });
            },
            error: function(model, response) {
                App.Components.Form.ErrorHandler.applyErrors({
                    view: _this,
                    errorData: JSON.parse(response.responseText)
                });
            }
        });
    }
});

一切都很好。但现在有一个要求，即在 Dependents 部分保存后，需要重新计算“到期金额”。在代码的其他地方，我使用 App.execute("recalculate:amount:due");

进行了处理

我正在努力理解如何使用 jQuery 的 deferred(或 promises 或 when...)将 this.children.each 包装在 saveSection 函数中复合 View ，以便在保存所有子部分后，将命令发泄出去。

Answer 1

尝试以下操作。

首先，您的submitForm 需要返回延迟:

submitForm: function() {
    // same var declarations

    return _this.model.save(data, {
        // same code
    });
}

然后，存储每个延期的，并在它们全部完成时计算到期金额。

saveSection: function(event) {
    event.preventDefault();

    var deferreds = [];
    this.children.each(function(childView){
        deferreds.push(childView.submitForm());
    });

    $.when.apply($, deferreds).done(function(){
      // calculate amount due
    });
}

如果您不清楚 deferred 是如何工作的，您可能需要查看我写的关于该主题的 2 篇博文:

http://davidsulc.com/blog/2013/04/01/using-jquery-promises-to-render-backbone-views-after-fetching-data/

http://davidsulc.com/blog/2013/04/02/rendering-a-view-after-multiple-async-functions-return-using-promises/