1

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

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

使用上面的代码，我在控制台中注意到“页脚”没有按应有的方式出现。所以也许控制器有问题？或“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

应用程序.js

//= require jquery
//= require lib/underscore
//= require lib/backbone
//= require lib/marionette
//= require_tree ./backbone/config  
//= require backbone/app
//= require_tree ./backbone/apps

应用程序.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

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

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

4

1 回答 1

1

检查以下内容：

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

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

于 2013-05-31T07:27:56.163 回答