Nested Models in Backbone.js, how to approach Nested Models in Backbone.js, how to approach javascript javascript

Nested Models in Backbone.js, how to approach


I have the very same issue while I'm writing my Backbone application. Having to deal with embedded/nested models. I did some tweaks that I thought was a quite elegant solution.

Yes, you can modify the parse method to change a attributes around in the object, but all of that is actually pretty unmaintainable code IMO, and feels more of a hack than a solution.

Here's what I suggest for your example:

First define your Layout Model like so.

var layoutModel = Backbone.Model.extend({});

Then here's your image Model:

var imageModel = Backbone.Model.extend({    model: {        layout: layoutModel,    },    parse: function(response){        for(var key in this.model)        {            var embeddedClass = this.model[key];            var embeddedData = response[key];            response[key] = new embeddedClass(embeddedData, {parse:true});        }        return response;    }});

Notice that I have not tampered with the model itself, but merely pass back the desired object from the parse method.

This should ensure the structure of the nested model when you're reading from the server. Now, you would notice that saving or setting is actually not handled here because I feel that it makes sense for you to set the nested model explicitly using the proper model.

Like so:

image.set({layout : new Layout({x: 100, y: 100})})

Also take note that you are actually invoking the parse method in your nested model by calling:

new embeddedClass(embeddedData, {parse:true});

You can define as many nested models in the model field as you need.

Of course, if you want to go as far as saving the nested model in its own table. This wouldn't be sufficient. But in the case of reading and saving the object as a whole, this solution should suffice.


I'm posting this code as an example of Peter Lyon's suggestion to redefine parse. I had the same question and this worked for me (with a Rails backend). This code is written in Coffeescript. I made a few things explicit for people unfamiliar with it.

class AppName.Collections.PostsCollection extends Backbone.Collection  model: AppName.Models.Post  url: '/posts'  ...  # parse: redefined to allow for nested models  parse: (response) ->  # function definition     # convert each comment attribute into a CommentsCollection    if _.isArray response      _.each response, (obj) ->        obj.comments = new AppName.Collections.CommentsCollection obj.comments    else      response.comments = new AppName.Collections.CommentsCollection response.comments    return response

or, in JS

parse: function(response) {  if (_.isArray(response)) {    return _.each(response, function(obj) {      return obj.comments = new AppName.Collections.CommentsCollection(obj.comments);    });  } else {    response.comments = new AppName.Collections.CommentsCollection(response.comments);  }  return response;};


Use Backbone.AssociatedModel from Backbone-associations :

    var Layout = Backbone.AssociatedModel.extend({        defaults : {            x : 0,            y : 0        }    });    var Image = Backbone.AssociatedModel.extend({        relations : [            type: Backbone.One,            key : 'layout',            relatedModel : Layout                  ],        defaults : {            name : '',            layout : null        }    });