Backbone.js: when to render views when navigating routes - view

Question

Here are the requirements for my backbone app
display a list of folders that user has created
display the contents of a folder when a folder is clicked
Here is how I've implemented it.
AppRouter = Backbone.Router.extend({
routes: {
'': 'home',
'get/:name/:id': 'contents'
},
home: function() {
// show list of folders
},
contents: function(name, id) {
// show contents of clicked folder
}
});
This approach is giving me problems since when I click on a folder, the route gets saved in browser history and is of the structure 'domain.com#get/folder/1`. If I happen to paste this url in the address bar of browser, the list of folders won't be rendered since it doesn't match the route.
Would it be a smart strategy to display the list of folders in initialize function of router? may be create a page view which checks if the folders have already been displayed or not?

Answer 1

If I understand correctly, the list of folders should be shown permanently. And your application has two big views, the list of folders, and the contents. And the list of folders must be displayed all the time.
var AppRouter = Backbone.Router.extend({
// it's better to use REST names than custom ones
routes: {
'': 'index',
'get/:id/:name': 'show'
},
initialize: function(options) {
this.folders = new Folders(options.folders); // folders is your Backbone.Collection
// always show the FoldersView, something like
// new FoldersView({collection: this.folders, el: $('the folders container')})
},
index: function() {
// probably clear the contents area, something like
// $("#content").html('')
}
show: function(id, name) {
var folder = this.folders.get(id);
// create a view for this folder
// and render it in the content area, something like
// view = new FolderView(model: folder)
// $("#content").html(view.render().el)
}
})