Backbone Design

Question

I'm just getting started with Backbone. I went through the first two PeepCode screencasts which were great and now I'm digging in on a quick detached (no server side) mock-up of a future app.

Here's what I'm looking to build (roughly). A series of five text boxes - lets call these Widgets. Each Widget input, when selected, will display a pane that shows Tasks associated with the Widget and allow the user to create a new Task or destroy existing Tasks.

At this point, I'm thinking I have the following models:

Widget
Task

The following collections:

Tasks
Widgets

The following views (this is where it gets hairy!)

WidgetListView
  - Presents a collection of Widgets
WidgetView 
  - sub-view of WidgetListView to render a specific Widget
TaskPaneView 
  - Presented when the user selects a Widget input
TaskCreateView 
  - Ability to create a new Task associated with selected Widget
TaskListView 
  - Presents a collection of Tasks for the given widget
TaskView 
  - Displays Task detail - sub-view of TaskListView

Assuming that's reasonable, the trick becomes how to display a TaskPaneView when a WidgetView is selected. And futhermore, how that TaskPaneView should in turn render TaskCreateViews and TaskListViews.

The real question here is: Does one cascade render events across Views? Is it permissible for a Root view to know of sub-views and render them explicitly? Should this be event-driven?

Apologies if this is an open-ended question, just hoping someone will have seen something similar before and be able to point me in the right direction.

Thanks!

Answer 1

Definitely make it event driven. Also, try not to create views that are closely coupled. Loose coupling will make your code more maintainable as well as flexible.

Check out this post on the event aggregator model and backbone:

http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/

The short version is you can do this:

var vent = _.extend({}, Backbone.Events);

and use vent.trigger and vent.bind to control your app.