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

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.