Backbone model which I see in success callback and error callback is different. #Backbone save

Question

I have a backbone model which has Backbone Collections in it. When I save the model and if it is success then my model object is properly structured as it was. But when error occurs (say validation error), in error callback the model object is modified (Collections inside model object are converted into Array). As a result all my functions defined for that Collections are now "undefined" and gives me error.

    save : function() {
        this.model.save(_.extend(originalModel.toJSON() || {}, this.model
                .toJSON()), {
            success : this.onSaveSuccess,
            error: this.onSaveError,
            include : []
        });
    },

    onSaveSuccess : function(model) {
        //Here the model is properly structured
    },


    onSaveError : function(model, response) {
        // Here the model is modified, all collections are now array
        //I have to explicitly call my parse method to re structure it.
        model = model.parse(model.attributes);
    }

I would like to know why is this happening. Am I doing something wrong here ?

Where does `originalModel` come from in the above code? – Peter Wagener Feb 08 '15 at 20:32 — Peter Wagener, Feb 08 '15 at 20:32

score 2 · Accepted Answer · answered Feb 08 '15 at 20:47

For the sake of this example, let's assume the attribute of the model that holds the collection is called "people". It isn't clearly documented, but model.save(attributes) actually behaves like:

model.set(attributes);
model.save();

Here's the relevant annotated source of save(...). What your code is doing is first setting the "people" attribute to the array of people, then attempting to save it. When the save fails, your model has the array, not the collection, as the value of "people".

I suspect your end point is returning the full representation of the model on success, and your model is correctly parsing that representation & re-building the Collection at that point. But your error handler won't do that automatically.

As an aside, in my experience Models that contain Collections are hard to manage & reason about. I've had better luck having a Model that contains an array of data, and then having a method on that Model to build a Collection on the fly. Something like:

var MyModel = Backbone.Model.extend({
    // ...

    getPeople: function() {
        // See if we've previously built this collection
        if (!this._peopleCollection) {
            var people = this.get('people');
            this._peopleCollection = new Backbone.Collection(people);
        }
        return this._peopleCollection;
    }
});

This removes the Collection concept from the server communication (where it's pretty unnecessary), while also providing a smarter data layer of your application (smart Models are a good thing).

Yes end point is returning the full representation of the model on success and my error handler doesn't do that automatically. But when I set option{wait:true} every thing works fine. My model state is preserved. — ashy143, Feb 09 '15 at 18:14

score 0 · Answer 2 · answered Mar 13 '15 at 20:25

The solution for this is passing wait:true in options. This will not modify until and unless server returns a valid response.

save : function() {
    this.model.save(_.extend(originalModel.toJSON() || {}, this.model
            .toJSON()), {
        success : this.onSaveSuccess,
        error: this.onSaveError,
        **wait:true**
        include : []
    });
},

Backbone model which I see in success callback and error callback is different. #Backbone save

2 Answers2