Backbone Router For Modals - backbone.js

Question

I have a very basic Backbone JS application that has modals. Currently, my router presents the modals as follows:
class App.Routers.Router extends Backbone.Router
routes:
"modal" : "modal"
modal: ->
view = new App.Views.Modal.New()
$('#shared').html(view.el)
view.render()
view.show()
return
class App.Views.Sessions.New extends Backbone.View
template: Handlebars.templates["backbone/templates/modals"]
initialize: (options) ->
super(options)
render: ->
$(#el).html(#template())
$('.modal', #el).modal()
$('.modal', #el).on 'hidden', #cleanup
return #
show: ->
$('.modal', #el).modal('show')
hide: ->
$('.modal', #el).modal('hide')
cleanup: ->
# ?
This works fine, however I am unclear of how to handle the window history and a user selecting the back button (i.e. how to I teardown the modal on clicking back). Does anyone have any ideas on the best approach? Thanks.

Answer 1

You've stumbled on an interesting problem with single page apps (SPAs). Yes it can get a bit tricky but simple software engineering principles/designs can help here. I've dealt with clean up in the following way:
Have a separate class/object responsible for managing view transitions between various 'parts of the application'. For example in my app I have something like this:
var App = {};
//when showing a specific app:
App.showView = function(appToShow){
if(this.currentApp)
currentApp.close();
this.currentApp = appToShow;
//render appToShow;
}
appToShow is a 'class' that has methods create/render and close. So that the app is responsible for it's clean-up.
Now sometimes I have modal or "sub apps" within the main application. I've used a variant of the above and added a close method to the App object. But the basic idea is to add these 'sub apps' as a property of the main app:
//when creating modal:
App.addModal = function(modal){
this.currentApp.modal = modal;
}
Now when transitioning by clicking the back button or to a different part of the app - you must call upon the App-manager to handle the clean-ups and transitions. It's basically like saying:
App.closeModal = function(modal){
if(this.currentApp.modal)
this.currentApp.modal.close();
}
Depending on how your routers are organized, you should be able to decide whether to close the entire app altogether or just the modal/sub-apps. Basically your "App Manager" is a separate object responsible for only handling transitions between the views and need not be a Backbone.View - a separate object would work just fine. You could even have it listen for events using Backbone's events by creating and event aggregator. Derick Bailey has written an excellent blog post detailing the same: http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/