Backbone Structure Tips

Question

New to Backbone and wondering if any Backbone experts can lend their advice as to how to structure the following application:

Users log in to view the Dashboard. The Dashboard has 6 Panes and the Content of each Pane is determined by each User's Preference List (a Backbone Model with attributes panelone: contentA, paneltwo: contentD, etc...)

Above the Panes is a horizontal list of Content types. The User should be able to drag and drop the Content type over a Pane to save it and render the Content in that Pane immediately.

For example, if ContentF dropped on Pane3 then Pane3 saves ContentF ( Model.set('Pane3: ContentF' ) and updates itself with ContentF's template.

Specifically, How do I divide up this functionality between Router, Views and Templates?

Thanks, AC

Answer 1

I can't consider myself a Backbone expert, anyway that's my two cents.

I suggest you to use Marionette, a framework built on top of Backbone that ease the things a lot.

You could setup your dashboard view as a layout, and each panel as a region of that. This way you could update each panel's content without affecting the others and have all the events and stuff attached to your old view be cleaned up by Marionette's build-in memory management.

Also I don't think your router should be too affected by a change in panels content, it should just render the view assigned to that specific content, so it just has to be able to access the list model. Each of this views will have their specific template and that's all!