Backbone: Collection not being passed into view with Require.js - backbone.js

Question

I'm rewriting a Backbone.js app trying to use an AMD approach. I've downloaded the AMD-ified versions of Backbone and Underscore. I checked and jQuery, Backbone and Underscore all get called. It's a fairly simple project, but for some reason my collection is no longer being passed to my view. I'm new to AMD.
Here is my model:
define([
'underscore',
'backbone'
], function(_, Backbone) {
var tableModel = Backbone.Model.extend({});
return tableModel;
});
Here is my collection:
define([
'jquery',
'underscore',
'backbone',
'models/tableModel'
],
function($, _, Backbone, tableModel) {
var tablesCollection = Backbone.Collection.extend({
url: this.url, // passed into collection at runtime, so same code can process multiple sets of data
model: tableModel,
initialize: function(models, options) {
if (options && options.url) {
this.url = options.url;
}
this.fetch({
success: function(data, options) {
if ($.isEmptyObject(data.models)) {
App.Collections.Tables.NoData(data);
}
}
});
}
});
return tablesCollection;
});
Here is my view:
define([
'jquery',
'underscore',
'backbone',
'models/tableModel',
'collections/tablesCollection',
'views/tableView'
],
function($, _, Backbone, tableModel, tablesCollection, tableView) {
var tv = Backbone.View.extend({
tagName: 'div',
initialize: function() {
console.log(this.collection); // returns collection and undefined
this.collection.on('reset', this.render, this); // errors: this.collection is undefined
},
render: function() {
return this;
}
});
return tv;
});
Here is where the view and collection are instantiated:
define([
'jquery',
'underscore',
'backbone',
'models/tableModel',
'collections/tablesCollection',
'views/tablesView'
], function($, _, Backbone, tableModel, tablesCollection, tablesView) {
var t = new tablesCollection(null, { url: 'main-contact'} );
var tables = new tablesView({ collection: t, template: 'main-contact-template'});
$('#web-leads').html(tables.render().el);
});
Why am I getting function (){return c.apply(this,arguments)} returned when I console.log(tablesCollection)? It's like the collection is not being passed in. Could it be a paths issue? My project is structured with a js folder with subfolders called collections, models and views. If I console.log(this), I get:
My data is in there, but is this what I need? Why do I not get my collection when I try to console.log it?

Answer 1

Do not use tablesCollection directly. Use this.collection. You have already initialized view with it

Answer 2

What you see is the function tablesCollection, i.e. the Backbone.Collection.extend(...) function.
The function tablesCollection is probably passed in fine into the view. However, you need to instantiate the object, e.g. new tablesCollection(null, {url: 'url'}) before logging it to the console, otherwise the extend wrapper function will show, which is what you see now.