Spine with Jquery Mobile

index.coffee

require('lib/setup')

Spine = require 'spine'
Stage = require 'lib/stage'
Router = require 'controllers/router'

class App extends Stage.Global
	
	
	constructor: ->
		super
	
		# $('body').bind 'click', (e) ->	e.preventDefault()
		# @el.bind 'touchmove', (e) ->		e.preventDefault()

		Spine.Route.setup()

		@router = new Router()
		@router.active()
		
		

module.exports = App

router.coffee

Spine 	= require 'spine'
Menu 		= require 'controllers/menu'
Scanner = require 'controllers/scanner'
Input 	= require 'controllers/input'
Database 	= require 'controllers/database'
Record	= require 'models/record'

class Router extends Spine.Controller
	
	constructor: ->
		super
	
		@log "router created"
		
		@initControllers()
		@setupRoutes()
		@fetchModels()
		
		
	active: ->
		transition =>
			@log "route is '#{@getRoute()}'"
			if @getRoute() is '' or @getRoute() is '/' then @navigate '/menu'
			else Spine.Route.matchRoute @getRoute()
		
	initControllers: ->
		@menu = 	new Menu
		@scanner = 	new Scanner
		@input = 	new Input
		@database = 	new Database
		
	fetchModels: ->
		Record.fetch()
		
	changePage: (controller, params) ->
		timeout = if controller is @menu then 500 else 250
		transition =>

			@log "navigating to #{controller['className']}"
			page = $("div.panel.#{controller['className']}")
			controller.active()
			page.trigger('create')
			$.mobile?.changePage(page)
		
		, timeout
		
	setupRoutes: ->
		@routes
			'/menu':	(params) -> @changePage @menu, params
			'/scan':	(params) -> @changePage @scanner, params
			'/show/:id':	(params) -> @changePage @input, params
			'/input':	(params) -> @changePage @input, params
			'/db':		(params) -> @changePage @database, params
			
		
module.exports = Router