Nested Backbone Models

When mapping a Backbone Model directly to a REST API it is common for the resource you’re accessing to have a nested or associated resources. Backbone Models are a wrapper for a single resource, but do not attempt to implement a nested resource relationship. Backbone Collections also provide a nice mechanism to fetch multiple resources at a time but also do not work well for a nested resource structure.

In our application we have a Question model that has many Answers. When using a collection to fetch our questions we also want, in the same call, to fetch the answers. This is what we’ve tried so far.

Our first attempt was using the Collection#parse function provided by Backbone. This method, however, is only for updating the raw attributes and returning model attributes. Hooking into the creation of the model needs to take place somewhere else.

For our second attempt, we tried binding to change events on the model during initialize. This also did not work. The attributes on the model were already populated by the time initialize happens, so change events were not fired on creation.

In our third attempt we used a collection to fetch the models and their nested associated resources. We bound to the reset call on the collection and then iterated over each of our models, instructing them to build out their associated models based on their attributes.

This provided us with a partial solution. We were able to get a model nested inside of another model. Unfortunately, when trying to save back out to the server Backbone had no idea what to do with the nested model. We solved this temporarily by overriding our toJSON method.

At some point soon we hope to try the Backbone Relational library, which seems to solve nested relationships in Backbone. It should allow us to move away from the temporary toJSON.