I recently worked on a Backbone project called GapVis (code here, rendered content here). I don’t know if it’s “really large”, but it’s big-ish and relatively complex – 24 view classes, 5 routers, etc. It might be worth taking a look, though I don’t know that all my approaches will be relevant. You can see some of my thinking in the long intro comment in my main app.js file. A few key architectural choices:
-
I have a singleton
Statemodel that holds all current state info – the current view, what model ids we’re looking at, etc. Every view that needs to modify application state does it by setting attributes on theState, and every view that needs to respond to the state listens to that model for events. This is even true for views that modify state and update – the UI event handlers ineventsnever re-render the view, this is done instead through binding render functions to the state. This pattern really helped to keep views separate from each other – views never call a method on another view. -
My routers are treated like specialized views – they respond to UI events (i.e. typing in a URL) by updating the state, and they respond to state changes by updating the UI (i.e. changing the URL).
-
I do several things similar to what you’re proposing. My namespace has an
initfunction similar to yours, and asettingsobject for constants. But I put most of the model and view classes in the namespace as well, because I needed to refer to them in multiple files. -
I use a registration system for my routers, and considered one for my views, as a nice way to keep the “master” classes (
AppRouterandAppView) from having to be aware of every view. In theAppViewcase, though, it turned out that order of child views was important, so I ended up hard-coding those classes.
I’d hardly say that this was the “right” way to do things, but it worked for me. I hope that’s helpful – I also had trouble finding visible-source examples of large projects using Backbone, and had to work out most of this as I went along.