为什么在访问模型时，backbone.js 返回一个空数组？

Question

我有一个路由器访问其集合。我的 for 循环没有迭代模型，因此我尝试记录集合以查看它返回的内容。事实证明，当我直接记录集合时，我会按预期看到所有模型。但是，如果我尝试记录集合的 models 属性，我会得到一个空数组！这没有道理。这些线直接彼此相连。我尝试更改顺序并得到相同的结果。

console.log(this.collection);
=> Shots
    _byCid:    Object
    _byId:     Object
    length:    15
    models:    Array[15]
    __proto__: Shots
    ...

console.log(this.collection.models);
=> []

console.log(this.collection.length);
=> 0

为什么会出现这种情况呢？

以下是路由器中的代码，可以更好地了解该代码的触发位置：

# Routers
class Draft.Routers.Shots extends Backbone.Router
  routes:
    ''            : 'index'
    'shots/:id'   : 'show'

  initialize: ->
    @collection = new Draft.Collections.Shots()
    @collection.fetch()

  index: ->
    console.log @collection
    console.log @collection.models

Answer 1

吉姆，

这并不能解决你的问题——你已经解决了这个问题。但它解释了为什么您会看到控制台输出。

当您运行 console.log(this) 时，您将输出对象本身，并且控制台将引用（如果您愿意，可以是指针）链接到内部变量。

当您在控制台中查看它时，在 console.log(this) 运行时，模型区域是空的，但是当您查看时日志中，集合已完成加载模型并且内部数组变量已更新，并且对象日志中对该变量的引用显示当前内容。

基本上在 console.log(this) 中，内部模型变量继续其正常生命周期，控制台显示您查看它时的当前状态，而不是您调用它时的状态。
使用console.log(this.models)，数组按原样转储，不保留引用，所有内部值都一一转储。

这种行为很容易在很短的超时时间内重现，请参阅this fiddle.. http://jsfiddle.net/bendog/XVkHW/

Answer 2

我发现我需要监听集合来重置。因此，我没有将模型传递到视图中，而是创建了另一个需要集合的视图，并侦听“重置”事件以触发视图的“渲染”。

# Routers
class Draft.Routers.Shots extends Backbone.Router
  routes:
    ''            : 'index'
    'shots/:id'   : 'show'

  initialize: ->
    @collection = new Draft.Collections.Shots()
    @collection.fetch()

  index: ->
    view = new Draft.Views.Desktop(collection: @collection)

# Views
class Draft.Views.Desktop extends Backbone.View
  el: $("body")

  initialize: ->
    @collection.on("reset",@render,this)

  render: ->
    console.log @collection
    console.log @collection.length

Answer 3

您可以使用承诺。 （.done 就可以了）

@collection.fetch().done =>
  for model in @collection.models
    console.log model

这将为您提供 @collection 的模型，并准备好使用。

或者如果您不需要强制应用程序等待，

@collection.on 'sync', =>
  for model in @collection.models
    console.log model

这两种方法都可以让您执行您想要的操作。