Why is backbone.js returning an empty array when accessing models?

Question

I have a router accessing its collection. My for loop wasn't iterating through the models so I tried logging the collection to see what it returned. Turns out when I log the collection directly I see all of the models as expected. But if I try to log the models attribute of the collection I get an empty array! It doesn't make sense. These lines are directly following each other. I tried changing the order and got the same outcome.

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

Why would this happen?

Here is the code as it is in the router to give a better context of where this code is firing:

# 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

Jim,

This doesn't fix your problem - you've worked that out. But it explains why you're seeing the console output you see.

When you run console.log(this), you output the object itself and the console links references (pointers if you like) to the inner variables.

When you're looking at it in the console, at the time the console.log(this) runs the models area is empty, but at the time you look at the logs, the collection has finished loading the models and the inner array variable is updated, AND the reference to that variable in the object log shows the current content.

Basically in console.log(this),inner models variable continues its normal life and the console shows the current status at the time you're looking at it, not at the time you called it. With console.log(this.models), the array is dumped as is, no reference is kept and all the inner values are dumped one by one..

That behaviour is quite simple to reproduce with a short timeout, see this fiddle.. http://jsfiddle.net/bendog/XVkHW/

Answer 2

I found that I needed to listen for the collection to reset. So instead of passing the model into the view I created another view expecting the collection and listened for the 'reset' event to fire 'render' for the view.

# 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