Question

我正在尝试跟随这个系列：

http://www.backbonerails.com/series/engineering_single_page_apps

我在第5集，大约48分钟。当我在浏览器中刷新页面时，我会在firebug控制台中看到它：

uncaught exception: Template undefined not found

我尝试在http://coffescript.org运行我的代码，我收到此错误：

ReferenceError: Backbone is not defined

我不确定，但我猜测上面的错误正好发生，因为coffescript.org控制台不知道Backbone是什么。

以下是相关代码：

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

使用上面的代码，我注意到在控制台中“footer”没有显示出来。那么控制器可能有问题？或者“showFooter”方法中的某些内容。

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

使用上面的代码我注意，“标题”出现在控制台中，所以看起来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";

这是目录结构：

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

我想知道我的所有路径都是根据我的目录结构正确声明的。

感谢您的帮助，我将热切期待您的回复。

Answer 1

检查以下内容：

模板路径正确
您已在renderer.js.coffee中正确覆盖了渲染器，并且它已在HTML中正确加载（即您在查看页面源时可以看到代码）

如果看起来正确，请尝试将您的代码与截屏视频提供的源代码进行比较。

未捕获的异常：未找到模板未定义，ReferenceError：未定义Backbone

1 个答案: