Backbone.js - Customize the organization of data returned from "fetch()"

Question

What is a good way to go about customizing the server's response after a call to a model's fetch()?

The reason I ask is because I'm dealing with a situation where a model has several child models. The data returned from the server needs to be split up among the child models.

Example:

// A call to "fetch()" on this model needs to split up the returned data
//     between the two child models. Once this happens, their 'change'
//     events should fire and update their respective views.
var ParentModel = Backbone.Model.extend({
    initialize: function(){
        this.childModel_01 = new ChildModel_01({}); 
        this.childModel_02 = new ChildModel_02({});
    }
})

var ChildModel_01 = Backbone.Model.extend({});
var ChildModel_02 = Backbone.Model.extend({});

Thanks so much!

can you post a sample of the server response? why is it a model and not a collection? — u.k, Jul 20 '12 at 19:34
@Uzi - Collections are for groups of objects of the same type. These are discreet objects that are not of the same type. — Chris Dutrow, Jul 21 '12 at 15:08

score 2 · Answer 1 · answered Jul 20 '12 at 20:54

It might be a better option, unless you have a specific reason for making the two models nested attributes under another Model, to just call Backbone.sync directly and have a separate function specifically for accessing the server.

In my applications, I typically have a /bootstrap endpoint that does this for multiple models/collections at once. In your case it would look something like this:

var ChildModel_01 = Backbone.Model.extend({});
var ChildModel_02 = Backbone.Model.extend({});

var childModel_01 = new ChildModel_01({}); 
var childModel_02 = new ChildModel_02({});

Backbone.sync('read', {}, {
  url : '/bootstrap',
  success : function(resp, status, xhr) {
    childModel_01.set(resp.child_01)
    childModel_02.set(resp.child_02)
  },
  error : function() {
    // Deal with error here 
  }
});

where the JSON respone from the server would look like this:

{
   "child_01": {
     "attr" : "val",
     "attr2" : "val2"
   },
   "child_02": {
     "attr" : "val",
     "attr2" : "val2"
   }
}

If you do need them to be on the model, then look into the parse() function on the model for better handling server responses.

score 1 · Accepted Answer · answered Jul 20 '12 at 21:05

1

There is a parse function that is a bridge between the server response and the map of the JSON into your models. You must use it to customize your server response:

http://backbonejs.org/#Model-parse

answered Jul 20 '12 at 21:05

Daniel Aranda

6,426
2
21
28

score 0 · Answer 3 · answered Jul 20 '12 at 19:33

Since backbone is a restful service the RESTful way to do this is when your response comes back, it has URLs to grab the child resources, since I would imagine they are them self resources.

So a response might look like:

{
   attr1: 'value1',
   attr2: 'value2',
   childModelURLS: {
     childModel1URL: 'http://your.server.com/path/to/child/resource',
     childModel2URL: 'http://your.server.com/path/to/child/resource',
     childModel3URL: 'http://your.server.com/path/to/child/resource'
   }
}

This requires a change on the server and multiple calls from the client to the server instead of one call, correct? — Chris Dutrow, Jul 21 '12 at 15:04

Backbone.js - Customize the organization of data returned from "fetch()"

3 Answers3