In the real Backbone application, we'll often need to switch from one view to another. This is typically done with the help of Backbone.Router; it allows us to map a URL to the specific callback that renders a view. In Chapter 1, Understanding Backbone, we learned about a router in Backbone.js. However, we did not speak much about its interaction with views.
In this recipe, we are going to build a Backbone application that will dynamically render an appropriate view on the URL, as well as change and remove the view that was shown tothe user previously in order to prevent a memory leak. The views are going to be switched without a page reload, because Backbone.Router supports hash URLs and pushState
.
In our application, we are going to implement InvoiceListView
and InvoicePageView
. The first one displays a list of invoices, as shown in the following screenshot:
When the user clicks on the view details link, he/she is shown an invoice details screen like...