Question

I have two functions that loop through all models in a Backbone collection, and save those that have been changed, or destroy those that have been selected for deletion. What I need to do is collate the success and errors, so that I can notify “X number of changes/deletions were successful” and/or “There was an error changing/saving X number of domains”.

I’ve no experience with saving/destroying Backbone collections, only models; and can’t find anything on the internet that shows how to do this.

The save and remove are called by events in the parent view.

The relevant code:

App.Views.SiteDomains = Backbone.View.extend({
    el: '.site-domains',
    initialize: function() {
        this.collection.on('all',this.render, this);
    },
    render: function() {
        $('.site-domains').empty();

    this.collection.each( function(model)
    {
        var view = new App.Views.SiteDomain({model: model});
        this.$('.site-domains').append(view.render().el);

        return this;
    });
},
saveDomainChanges: function() {

    this.collection.each( function(model)
    {
        var ref = model.get('ref');

        if ($('#' + ref).val() != model.get('domain')) {

            $('.save-domains').prop('disabled', true);

            var fields = $(this.el).find('form').serializeArray(), data = {};

            $.each(fields, function(i, pair)
            {
                data[pair.name] = pair.value;
            });

            model.save(data, {

                wait:true,
                success: function(model, response, event)
                {
                    // Pass each success to notification function
                },

                error: function(model, response, event)
                {
                    // Pass each error to notification function
                }
            });
        }
    });
    $('.save-domains').prop('disabled', false);
},
removeDomain: function() {
    this.collection.each( function(model)
    {
        var ref = model.get('ref');

        if ($('#remove-' + ref).prop('checked'))
        {
            model.destroy({
                wait:true,
                success:function() {
                    // Pass each success to notification function
                },
                error: function() {
                    // Pass each error to notification function
                }
            });
        }
    });
}
});

Many, many, many thanks in advance to anyone that can help with this! 🙂

Answer 1

You could use an event aggregator and create Model/View or just POJO for the notifications according to your app design. Something like this:

// Event aggregator
App.vent = _.extend({}, Backbone.Events);

// POJO for the notifications
App.notifications = {
    var onCreateSuccess = function (model, response) {
        ...
    };
    var onCreateError = function (model, response) {
        ...
    };
    App.vent.on('sitedomain:create:success', onCreateSuccess);
    App.vent.on('sitedomain:create:error', onCreateError);
};

// Add event triggering to corresponding callbacks
model.save(data, {
    wait:true,
    success: function(model, response, event) {
        App.vent.trigger('createdomain:create:success', model, response);
    },

    error: function(model, response, event) {
        App.vent.trigger('createdomain:create:error', model, response);
    }
});