Not understanding how line 5 col is undefined

collections.js

App = this.App || {};

App.Photos = Backbone.Collection.extend({
  url: "/backlift/toc/photos"
});

App.Captions = Backbone.Collection.extend({
    url: "/backliftapp/captions",
    forFile: function(file) {
        return this.find(function(item) {
            return item.get('file') == file;
        });
    }
});

main.js

App = this.App || {};

function withCollections(collections, fn) {
    _.each(collections, function(col) {
        col.fetch({
            success: function() {
                col.fetched = true;
                var done = _.every(collections, function(item) {
                    return item.fetched == true;
                });
                if (done) { 
                    fn.call();
                }
            }
        });
    });
}

function main() {
  var photos = new App.Photos();
  var captions = new App.Captions();
  var gallery = new App.GalleryView({
    collection: photos,
    captions: App.captions,
    el: $("#gallery")
  });
  withCollections([App.photos, App.captions], function() {
      App.gallery.render();
  });
}

// run main() on page load
$(main);

views.js

App = this.App || {};

App.GalleryView = Backbone.View.extend({
    render: function() {
        var self = this;
        self.$el.empty();
        self.collection.each(function(photo) {
            self.renderPhoto(photo);
        });
        return self;
    },
  renderPhoto: function(photo) {
      var caption = this.options.captions.forFile(photo.get('file'));
    var params = {
      photo: photo.toJSON(),
    caption: caption ? caption.toJSON() : ""
    };
    this.$el.append(Handlebars.templates.photo(params));
    return this;
  }
});

main.js should have have used App. in front of photos and captions to ensure they were accessible by the app. :

App = this.App || {};

function withCollections(collections, fn) {
    _.each(collections, function(col) {
        col.fetch({
            success: function() {
                col.fetched = true;
                var done = _.every(collections, function(item) {
                    return item.fetched == true;
                });
                if (done) {
                    fn.call();
                }
            }
        });
    })
}

function main() {
  App.photos = new App.Photos();
  App.captions = new App.Captions();

  App.gallery = new App.GalleryView({
    collection: App.photos,
    captions: App.captions,
    el: $("#gallery")
  });

  withCollections([App.photos, App.captions], function() {
      App.gallery.render();
  });
}

// run main() on page load
$(main);