1

我是 Backbone.js 的新手，我正在尝试将它集成到我当前的 rails 应用程序中。我正在关注 railscasts 的教程，但在集成它们时遇到了麻烦。基本上，我正试图调用我的资源（项目），并将它们显示在页面上。我的路由器如下所示：

class Placeholder.Routers.Projects extends Backbone.Router
  routes:
    '': 'index'
    'projects/:id':'show'

  initialize: ->
    @collection = new CIS196Project.Collections.Projects()
    @collection.fetch()

  index: ->
    view = new Placeholder.Views.ProjectsIndex()
    $('#container').html(view.render().el)

  show: (id) ->
    alert "Project #{id}"

我的观点如下：

class Placeholder.Views.ProjectsIndex extends Backbone.View

  template: JST['projects/index']

  initialize: ->
    document.write(@collection)
    @collection.on('reset', @render, this)

  render: ->
    $(@el).html(@template(projects: @collection))
    this

我大部分都是直接从教程中学到的。我添加了document.write(@collection)测试。

加载页面后，我收到错误：

projects_index.js:17 未捕获类型错误：无法调用未定义的“on”方法

我fetch()在路由器中成功创建了，因为在我的日志中，GET 请求成功通过，并且在 chrome 的控制台中尝试它时，获取应该返回一个大小为 1 的数组，但是它给出了那个错误，然后从其控制器加载默认的rails视图（我也不确定为什么会发生这种情况。我有一个定义的模板，但是当它抛出这个错误时，它只是恢复到以前，除非我调用document.write ）。调用后document.write，@collection显示为“未定义”。

感谢您提供的任何帮助！

4

1 回答 1

2

您正在将您的集合创建为路由器中的实例变量：

class Placeholder.Routers.Projects extends Backbone.Router
  #...
  initialize: ->
    @collection = new CIS196Project.Collections.Projects()
    #...

但是您永远不会将该集合提供给您的视图：

index: ->
  view = new Placeholder.Views.ProjectsIndex()
  #...

如果您将集合提供给您的视图：

index: ->
  view = new Placeholder.Views.ProjectsIndex(collection: @collection)
  #...

那么你collection的视图中就会有一个实例变量。

来自精美手册：

构造函数/初始化 new View([options])

[...] 有几个特殊选项，如果通过，将直接附加到视图：model、collection、el、id、className和。tagNameattributes

因此，仅collection在实例化视图时指定选项就足以在视图中获得 a @collection。

顺便说一句，console.log(@collection)这是一个比 更好的主意document.write(@collection)，document.write但具有不幸的副作用（例如有时会擦除整个页面），并且console.log会产生更具可读性的输出。

于 2012-04-15T23:34:08.360 回答