* POST NOT FINISHED **

#### Introduction

Creating single-page applications with backbone.js and tastypie is really fun. Although I think there are a few downsides to single pages apps (harder to unit tests, harder to debug, more expensive to maintain), the experience you have in a single page app is certainly more enjoyable. It makes scaling a web service a bit easier also because more of the work is done in the client’s browser, and not in web-server threads/processes on the cloud.

I recently ran into a weird issue that I have seen more then one time involving clicks in a series of views in a backbone router. I am going to demostrate how many application worked, and what the solution was.

The application I created has three panels: The left/middle vertical panels act as navigation, while the larger, right panel acts as the content. In this example, when you click on “receipients”, the content pane will change to the dropdown list of “contact lists”.

All three panels are separate backbone views within a single backbone router.

The problem I have run into many times, is what is the best way to swap on different backbone views in the “content panel”. In the image above, as you click through “Campaign Name” -> “Receipients” -> “Craft Emails”, the content view needs to toggle for each click.

The following example was a very early version of the router:

As you can see, I am swapping the content pane by utilizing (this isnt ideal) the html() attribute of \$("#js-edit-section")