SproutCore 20 Routing + Statechart

main.coffee

require 'sproutcore'
require 'sproutcore-statechart'
require 'sproutcore-routing'

App = SC.Application.create()

App.GlobalNavController = SC.Object.create(
  home: -> App.statechart.gotoState 'home'
  about: -> App.statechart.gotoState 'about'
)

App.HomePageView = SC.View.create(
  templateName: "application/~templates/pages/home"
)
App.AboutPageView = SC.View.create(
  templateName: "application/~templates/pages/about"
)

App.statechart = SC.Statechart.create(
  rootState: SC.State.extend(        
    home: SC.State.extend(
      enterState: ->
        @set 'globalContent', App.HomePageView.appendTo('#content')
        App.router.setRoute 'pages/home'

      exitState: ->
        @get('globalContent').remove()
    )
    
    about: SC.State.extend(
      enterState: ->
        @set 'globalContent', App.AboutPageView.appendTo('#content')
        App.router.setRoute 'pages/about'

      exitState: ->
        @get('globalContent').remove()
    )    
  )
)

App.router = SC.Object.create(

  initRouter: ->
    SC.routes.add 'pages/:page', App, @pages
    SC.routes.add '*url', App, @default
  
  pages: (params) ->
    App.statechart.gotoState params.page
  
  default: (params) -> 
    App.statechart.gotoState "home" unless params.url
  
  setRoute: (route) ->
    SC.routes.set "informLocation", route
)


document.ready = ->
  App.router.initRouter()
  App.statechart.initStatechart()