uncaught exception: Template undefined not found, ReferenceError: Backbone is not defined - ruby-on-rails

Question

I am trying to follow along with this series:
http://www.backbonerails.com/series/engineering_single_page_apps
I am on episode 5, at around the 48 min mark. When I refresh the page in my browser, I get this in the firebug console:
uncaught exception: Template undefined not found
I tried running my code at http://coffescript.org, and I get this error:
ReferenceError: Backbone is not defined
I'm not sure, but I'm guessing the above error is just occurring because the coffescript.org console doesn't know what Backbone is.
Here is the relevant code:
show_controller.js.coffee
#Demo.module "FooterApp.Show", (Show, App, Backbone, Marionette, $, _) ->
Show.Controller =
showFooter: ->
console.log "footer"
footerView = #getFooterView()
App.footerRegion.show footerView
getFooterView: ->
new Show.Footer
With the above code, I notice in the console that "footer" is not appearing as it should. So maybe something is wrong with the controller? Or something within the "showFooter" method.
list_controller.js.coffee
#Demo.module "HeaderApp.List", (List, App, Backbone, Marionette, $, _) ->
List.Controller =
listHeader: ->
console.log "header"
headerView = #getHeaderView()
App.headerRegion.show headerView
getHeaderView: ->
new List.Header
With the above code, I DO NOTICE that "header" is appearing in the console, so it seems everything is alright with the HeaderApp.
show_view.js.coffee
#Demo.module "FooterApp.Show", (Show, App, Backbone, Marionette, $, _) ->
class Show.Footer extends Marionette.ItemView
template: "footer/show/templates/show_footer"
list_view.js.coffee
#Demo.module "HeaderApp.List", (List, App, Backbone, Marionette, $, _) ->
class List.Header extends Marionette.ItemView
template: "header/list/templates/list_header"
header_app.js.coffee
#Demo.module "HeaderApp", (HeaderApp, App, Backbone, Marionette, $, _) ->
#startWithParent = false
API =
listHeader: ->
HeaderApp.List.Controller.listHeader()
HeaderApp.on "start", ->
API.listHeader()
footer_app.js.coffee
#Demo.module "FooterApp", (FooterApp, App, Backbone, Marionette, $, _) ->
#startWithParent = false
API =
showFooter: ->
FooterApp.Show.Controller.showFooter()
FooterApp.on "start", ->
API.showFooter()
renderer.js.coffee
#Demo.module "FooterApp", (FooterApp, App, Backbone, Marionette, $, _) ->
#startWithParent = false
API =
showFooter: ->
FooterApp.Show.Controller.showFooter()
FooterApp.on "start", ->
API.showFooter()
app.js.coffee
console.log #
#Demo = do (Backbone, Marionette) ->
App = new Marionette.Application
App.addRegions
headerRegion: "#header-region"
mainRegion: "#main-region"
footerRegion: "#footer-region"
App.addInitializer ->
App.module("HeaderApp").start()
App.module("FooterApp").start()
App.on "initialize:after", ->
if Backbone.history
Backbone.history.start()
App
application.js
//= require jquery
//= require lib/underscore
//= require lib/backbone
//= require lib/marionette
//= require_tree ./backbone/config
//= require backbone/app
//= require_tree ./backbone/apps
application.css
#import "twitter/bootstrap";
#import "apps/base";
#import "apps/header";
#import "apps/footer";
Here is the directory structure:
app
assets
javascripts
backbone
apps
footer
show
templates
show_footer.jst.eco
show_controller.js.coffee
show_view.js.coffee
footer_app.js.coffee
header
list
templates
list_header.jst.eco
list_controller.js.coffee
list_view.js.coffee
header.app.js.coffee
config
marionette
renderer.js.coffee
app.js.coffee
application.js
stylesheets
application.css
I'm wondering if all my path stuff is declared correctly based on my directory structure.
Thanks for any help, I'll be awaiting a response eagerly.

Answer 1

Check the following:
The template paths are correct
You've properly overridden the he renderer in renderer.js.coffee and it's getting loaded properly in the HTML (i.e. you can see the code when you view the page's source)
If that looks correct, try comparing your code to the source code provided with the screencast.