How can we leverage jQuery deferred within Backbone Marionette composite views, where each items view contains a form, to execute a task after each form submission is successful?

Question

How can we leverage jQuery deferred within Backbone Marionette composite views, where each items view contains a form, to execute a task after each form submission is successful?

I am utilizing a Backbone Marionette composite view in which each child item view contains its own form.

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

All of the above functions as intended. However, a new requirement has surfaced that demands a recalculation of an 'amount due' after the Dependent section has been saved. In another part of the codebase, I have handled this with

App.execute("recalculate:amount:due");

I am currently facing difficulties in comprehending how to utilize jQuery's deferred (or promises or when...) to wrap the this.children.each process within the saveSection function of the composite view. The objective is to trigger the command only after all child sections have been successfully saved.

javascript jquery backbone.js marionette

Answer 1

Answer №1

Here are some steps you can follow.

To begin with, ensure that your submitForm function returns a deferred object:

submitForm: function() {
    // variable declarations

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

Next, keep track of each deferred object and calculate the total amount due upon their completion.

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

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

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

If you are unsure about how deferred objects work, you may find it helpful to read two blog posts I wrote on the topic:

Answer 2

Here are some steps you can follow.

To begin with, ensure that your submitForm function returns a deferred object:

submitForm: function() {
    // variable declarations

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

Next, keep track of each deferred object and calculate the total amount due upon their completion.

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

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

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

If you are unsure about how deferred objects work, you may find it helpful to read two blog posts I wrote on the topic:

Answer 3

Answer №2

The approach I ultimately took:

Upon conducting extensive research and experimentation, it became apparent that backbone models do not inherently adhere to the deferred pattern. While it is possible to leverage promises in the ajax calls that backbone sync defers to, this method proved to be unreliable.

To address this issue, I opted to incorporate the Backbone Deferred plugin into my project.

var Person = Backbone.Deferred.Model.extend({
    urlRoot: App.apiRoot + '/Person'
});

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

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 promises = [];
        this.children.each(function(view){
            promises.push( view.submitForm() );
        });

        $.when.apply($, promises).done(function() {
            App.execute("recalculate:enrollment:subscription:rate");
        });

    }
});

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

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

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

Answer 4

The approach I ultimately took:

Upon conducting extensive research and experimentation, it became apparent that backbone models do not inherently adhere to the deferred pattern. While it is possible to leverage promises in the ajax calls that backbone sync defers to, this method proved to be unreliable.

To address this issue, I opted to incorporate the Backbone Deferred plugin into my project.

var Person = Backbone.Deferred.Model.extend({
    urlRoot: App.apiRoot + '/Person'
});

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

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 promises = [];
        this.children.each(function(view){
            promises.push( view.submitForm() );
        });

        $.when.apply($, promises).done(function() {
            App.execute("recalculate:enrollment:subscription:rate");
        });

    }
});

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

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

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

How can we leverage jQuery deferred within Backbone Marionette composite views, where each items view contains a form, to execute a task after each form submission is successful?

Answer №1

Answer №2

Similar questions

Encountering an 'undefined' property error when clicking a button in Angular 1.x

Can we tap into the algorithm of curveMonotoneX in d3-shape?

Upcoming construction: Issue encountered - The Babel loader in Next.js is unable to process .mjs or .cjs configuration files

Optimizing performance: Making the most of mongoose updateMany middleware

Creating a list of font sizes for each <p> tag in my HTML document

Issue: mongoose.model is not a valid function

JavaScript : Retrieve attributes from a JSON object

Iterating through a JSON query in AngularJS using the ng-repeat directive

Adjusting the navigation image as it passes through various div elements during scrolling

The request in Node.js was terminated

Troubleshooting the issue of CSS animations activating twice and causing a flickering effect specifically in the Firefox browser

Ways to pass JavaScript variables to a Python script

The Google Docs viewer is displaying an empty screen

The JavaScript animations in AngularJS using ng-class are not being activated

Deciphering Google location data using JavaScript

Incorporating Angular module into the mean.io bundle

Executing Two Distinct JQuery Api Requests

What is the procedure for iterating through the square brackets of a JSON array?

Guide on extracting unique identifiers from an array of objects and sorting them by the earliest date in JavaScript

To prevent flickering when using child flex elements, it's best to use position fixed along with a dynamically updated scrollbar position using Javascript