Backbone.js Master-Detail scenario

Question

I have a classic master-detail scenario that I am implementing in backbone.js.

For the moment I am not concerned with the history and navigation part of backbone.js so I am skipping it.

• I have a GridView where all the models are fetched and displayed from a rest service.
• I have a DetailView (modal window) where a particular selected model from a grid is displayed with more fields appearing that in master grid view.

I have implemented:

• a main application where all the backbone views and routers are attached.
• the application is initialized on document loaded
• a main Backbone router (acting more as a classical "controller") with responsibilities for:
  • creating and destroying views
  • fetching and posting data
  • passing data to views
  • coordinating views events

Now the data returned from the rest service for the gridView (Backbone collection) is only some partial data of the models.

So to display the full details of a particular model I have to fetch the details again from the rest service.

Fetching from the model end up with a model disconnected from the collection and any update on it isn't reflected on the collection itself and I have to refresh again the master view fetching all the data.

Destroying and recreating the details view sometimes make it loose the view events.

What would be the correct implementation of this scenario? I am not fully understanding the best way of doing things in backbone.

Answer 1

First, I would suggest returning the full detail for the models in your "gridView" collection query. This solves the 'disconnected collection' issue.

Although, you don't have to do the full collection load - let's say doing a full load for the entire collection is not going to work - the details are too huge, for instance, you should be able to pass the same model from the collection into your detail view, test to see if its a partial load or a full load, and issue a "fetch()" for the model, returning the full data - being that this is the same model as in the collection, it should be updated. Does that make sense?

Also, for the detail views, I would suggest, especially if you're design only calls for one detail view active, to reuse the view and write a function in the view that allows you to swap out the model.

So, in summary:

• On application start, load one gridView and one detailView.
• refactor your detailView to allow models to be set on it. (detailView.setModel(..)
• when the user wants to see the details on a model, pass that model into the detailView using the above function.
• if the model isn't fully loaded, your setModel method can go and fetch() the rest of the data. You could either test for a specific property that would only be there on full load, or set a property on the model to indicate whether its been fully loaded.
• If you find yourself losing events, try calling delegateEvents() at the end of your render() function it rebind the events.
• Since the same model is being used in both the gridView collection and the detailView, assuming you're responding to the change events properly, everything should be synchronized.