How do I load sub-models with a foreign key relationship in Backbone.js?

Question

Sorry if this is a bit convoluted... I am still learning Backbone.js...

What is the proper way to load & save Backbone models that have sub-models within themselves? (And should I even be having sub-models?)

For example, (pardon the coffeescript), if I have something like:

class Address extends Backbone.Model
  urlRoot: '/api/v1/address/'
  url: -> return @urlRoot+@id+'/?format=json'
  defaults: {'city': '', 'state': ''}

class Person extends Backbone.Model
  urlRoot: '/api/v1/person/'
  url: -> return @urlRoot+@id+'/?format=json'
  defaults: { name: 'Anon', address: new Address }

... and then I do this ...

dude = new Person
dude.set('id',101)
dude.fetch()
// Response returns {name: 'The Dude', address: '/api/v1/address/1998/'}
// And now, dude.get('address') is '/api/v1/address/1998' and no Address object

where = new Address
where.set('id',1998)
where.fetch()
// Response returns {city: 'Venice', state; 'CA'}

What I want is to say dude.fetch() and for it to get both the dude and his address, and when I call Backbone.sync('update',dude), I want to save both the dude and his address. How?

On the backend, I am using tastypie to construct my api for some SQLAlchemy tables (not Django's ORM), and so I have a resource for my Person table and Address table:

class AddressResource(SQLAlchemyResource):
    class Meta:
        resource_name = 'address'
        object_class = AddressSQLAlchemyORMClass

class PersonResource(SQLAlchemyResource):
    address = ForeignKey(AddressResource, 'address')
    class Meta:
        resource_name = 'person'
        object_class = PersonSQLAlchemyORMClass

Tastypie's ForeignKey function creates a mapping that returns the URL to the address in question.

I tried overloading the Dude.parse() function to call fetch for the Address(), but it wasn't working and it felt wrong, and it raised all sorts of questions:

1. Should I be modifying my tastypie response to include the Address as a nested object?
2. If I change to a nested object, should I be use backbone-relational, as in the question Backbone-Relational related models not being created, or is that overkill?
3. Should I be overloading the parse() or fetch() function or creating my own backbone.Sync() to get the response and then do this manually?
4. Since it is one-to-one, should I instead just have one model, instead of a sub-model, and send the information back forth together in one request?

Is there a standard way of doing this?

Answer 1

With Tastypie, you can change the response to being a nested object, instead of a link, by specifying full=True in the ForeignKey definition:

class PersonResource(SQLAlchemyResource):
    address = ForeignKey(AddressResource, 'address', full=True)

This returns the address object along with the person.

Next, I still don't know if this is the best way, but I moved my sub-model out of the attributes, and overloaded parse() to set it, and update() to save it, like:

class Person extends Backbone.Model
  address: new Address
  urlRoot: '/api/v1/person/'
  url: -> return @urlRoot+@id+'/?format=json'
  defaults: { name: 'Anon'}

  parse: (response) ->
     addressResp = response.address || {}
     addressAttr = @address.parse(addressResp)
     @address.set(addressAttr)
     return response

  update: (options) ->
     @set('address',@address.toJSON())
     Backbone.sync 'update', @, options

In this example, I could add the address back to the attributes and manage it with set/get, but then in my own environment, I've created an alternate toJSON function for the json to post to the server, and couldn't find a good way to set the json to the object without changing it from a collection to a json response.