How I manage complex single page dynamic web apps.

single-page-app.js.coffee

#content
  = spinner_tag()

:javascript
  jQuery.ready(function() {
    var pageView = new PageView();
    pageView.render()
  });


class PageView

  initialize: ->
    @router = new Router()
    @homeView = new HomeView()
    
    # Register listeners that the view class triggers.
    @homeView().on('clickProfile', => @router().navigate('profile', {trigger: true}))
    @homeView().on('clickFeed', => @router().navigate('feed', {trigger: true}))
    
    @setUpRouting()

  setUpRouting: ->
    @router().bind('route:home', => @renderHome())
    @router().bind('route:profile', => @renderProfile())
    @router().bind('route:feed', => @renderFeed())
    @router().start()


class Router extends Backbone.Router
  routes: {
    '': 'home',
    'profile': 'profile'
    'feed' : 'feed'
  }

  home: ->
    @trigger('route:home')
    
  profile: ->
    @trigger('route:profile')
    
  feed: ->
    @trigger('route:feed')
    

class HomeView extends Backbone.View

  template: 'home'
  el: '#content'

  events: {
    'click #profile' : 'clickProfile'
    'click #feed' : 'clickFeed'
  }

  render: ->
    @renderTemplate({})
    @

  clickProfile: ->
    @trigger('clickProfile')
    
  clickFeed: ->
    @trigger('clickFeed')