0

嗨，我有如下主干应用程序：

code.js.coffee

window.Code =
  Models: {}
  Collections: {}
  Views: {}
  Routers: {}
  initialize: ->
   new Code.Routers.Todos();
   Backbone.history.start()

$(document).ready ->
  Code.initialize()

todos_router.js.coffee

class Code.Routers.Todos extends Backbone.Router
    routes:
        '': 'index'
        'todos/:id': 'show'

    initialize: ->
        @collection = new Code.Collections.Todos()
        @collection.fetch()
    index: ->
        view = new Code.Views.TodosIndex(collection: @collection)
        view.render()
        $('#container').html(view.el)

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

todos.js.coffee --> 集合

class Code.Collections.Todos extends Backbone.Collection
  url: '/todos'

todos_index.js.coffee

class Code.Views.TodosIndex extends Backbone.View

  template: JST['todos/index']

  initialize: -> 


      this.collection.on('reset',this.render,this)

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

现在的问题是当我在模板上呈现集合以获取长度时，即使数据库上有 1 条记录，它仍然给我结果 0。我在这里做错了什么？this.collection 的控制台输出如下

Todos {length: 0, models: Array[0], _byId: Object, constructor: function, url: "/todos"…}
_byId: Object
_events: Object
length: 1
models: Array[1]
__proto__: ctor

谢谢！

4

1 回答 1

0

我在获取reset集合时触发事件时遇到了一些麻烦。您是对正在重置的集合特别感兴趣，还是只对 fetch 完成从 API 检索数据的操作感兴趣？如果是后者，请在您的视图中尝试此代码：

todos_index.js.coffee

class Code.Views.TodosIndex extends Backbone.View
  template: JST['todos/index']

  initialize: -> 
    @collection.on 'sync', @render

  render: =>
      $(@el).html(@template(todo: @collection))

有关每个事件何时触发的更多信息，请参阅公开事件列表。另请注意，该fetch方法采用各种布尔标志，指定是否触发某些事件。

如果您真的需要挂钩reset事件（也就是说，您想知道集合何时清空其内容），那么您可以尝试以下操作：

todos_router.js.coffee

class Code.Routers.Todos extends Backbone.Router
    routes:
        '': 'index'
        'todos/:id': 'show'

    initialize: ->
        @collection = new Code.Collections.Todos()
        @collection.fetch
          reset: true
          silent: false

    index: ->
        view = new Code.Views.TodosIndex(collection: @collection)
        view.render()
        $('#container').html(view.el)

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

todos_index.js.coffee

class Code.Views.TodosIndex extends Backbone.View
  template: JST['todos/index']

  initialize: -> 
    @collection.on 'reset', @render

  render: =>
      $(@el).html(@template(todo: @collection))

作为次要建议，您可能希望将@collection 向下推送到视图中，而不是将其保留在路由器中，除非您需要跨视图重用集合。

于 2013-04-28T15:14:43.843 回答