Backbone views design for standard menubar / detail pages mobile UI

Question

I'm building a mobile web app and have been struggling with the design and wiring of my backbone views.

Let me illustrate what I would like to achieve.

As you can see, the image above identifies few UI components:

• Toolbar view with back, search and menu button
• Tabbed view with lists
• Detail view
• Menu view

Some notes on the behavior:

• Tapping on the menu button overlays and animates the menu.
• The list and detail views are permanently accessible with hashtags

For now I have created views for the toolbar, menu, list and detail. But obviously there has to be some interaction between views and I'm not sure how to handle it.

Problems to solve:

1. Do I render all views when going to detail or list? If not, how to update the toolbar and handle that relationship
2. How to remember which tab was shown when going to detail from say tab 2 and go back to list. Remembering the visible tab with hashtags is not an option because just switching between tabs should not be remembered.

I've been looking into tbranyen layoutmanager but it still seems to assume complete isolated views.

Answer 1

I have had some success using Backbone.Marionette for this sort of thing. It allows you to define regions in your application, and then independently manage what views are displayed in those regions.

So the toolbar would be a region, and the main area would be a region. Then when switching between the list and detail you would just insert the list/detail view into the main region, leaving the toolbar region alone. Backbone Marionette would then take care of making sure the correct views are rendered and elements removed from the DOM etc.

As for remembering what the visible tab was, could you not just store it in a variable on the tab view? Or on some top level application object?