Backbone collection is not a constructor - backbone.js

Question

I've already checked the answers from people that have apparently the same problem but I haven't been able to fix my problem yet.
I have a view (teacher.profile.js) which is calling a collection (levels.js) which has a collection (subject.js), but when I load the page the subject collection is always undefined and said not to be a constructor.
After refreshing so many times, sometimes the second one, the subject collection is there and works.
Could anyone tell me what is wrong, please?
Thanks
subject.js
define(["GB"], function(GB) {
var subjectModel = GB.Model.extend({
idAttribute:"subjectId",
defaults: {
subjectId: '',
name: '',
levelId: '',
selected: false
}
});
return subjectModel;
});
subjects.js
define([
"GB",
"modules/register/teacher/models/subject"],
function (GB, SubjectModel) {
var subjectCollection = GB.Collection.extend({
model: SubjectModel,
url: "webapi/api/Administration/Subject"
});
return subjectCollection;
});
level.js
define(['GB', 'modules/register/teacher/models/subjects'], function (GB, SubjectCollection) {
var levelModel = GB.Model.extend({
defaults: {
levelId: '',
name: '',
iconClass: '',
subjects: ''
},
parse: function(attrs) {
**attrs.subjects = new SubjectCollection(attrs.subjects);** //Here is where the error is thrown. SubjectCollection is not a constructor.
return attrs;
}
});
return levelModel;
});
levels.js
define(["GB", "modules/register/teacher/models/level"], function (GB, LevelModel) {
var levelCollection = GB.Collection.extend({
model: LevelModel,
url: "webapi/api/Administration/Level"
});
return levelCollection;
});
teacher.profile.js view
define([
"GB",
"tpl!modules/register/teacher/teacherProfile", "modules/register/teacher/subject.level"
], function(GB, Template, SubjectLevelView) {
var view = GB.Views.Item.extend({
template: Template,
ui: {
subjects: "#subject-list",
levels: "#level-list",
infoTitle: "#info-title",
subjectsLevels: "#subjects-levels"
},
initialize: function() {
this.userLevels = [];
},
onRender: function() {
var self = this;
this.ui.infoTitle.text(GB.Localise("teacher-data-title"));
var levelsPromise = this.collection.fetch();
$.when(levelsPromise)
.then(function() {
var levelsSubjects = _.map(self.collection.models, function(item) {
if (item.get("subjects").length > 0) {
var view = new SubjectLevelView({ model: item });
self.userLevels.push(item);
return view.render().el;
}
});
self.ui.subjectsLevels.append(levelsSubjects);
});
}
});
return view;
});
main.js
require.config({
map: {
'*': {
'css': 'plugins/require-css/css',
'tpl': 'plugins/require.lodash.template', //this is our templating helper tpl!.html, its brings the template in already underscored, this is faster slightly than text! & subsequent template
'lodash': 'underscore'
}
},
paths: {
'plugins': '../plugins',
'styles':'../css',
'localisation':'core/localisation',
'jquery': '../lib/jquery-2.1.4',
'jquery.browser': '../plugins/jquery.browser',
'jquery.video': '../plugins/vide/jquery.vide',
'waypoints': '../plugins/waypoints/jquery.waypoints',
'backbone': '../lib/backbone',
'marionette': '../lib/backbone.marionette',
'text': '../lib/text',
'underscore': '../lib/lodash.underscore', //yes underscore is now lodash - its a better performer + extra features + no downside :)
'lodash': '../lib/lodash.underscore',
'bootstrap': '../lib/bootstrap',
'bootstrap-dialog': '../plugins/bootstrap-dialog/js/bootstrap-dialog',
'modernizr': '../lib/modernizr-2.8.3',
'backbone.validation': '../plugins/backbone-validation',
'themepunch.tools': '../plugins/rs-plugin/js/jquery.themepunch.tools.min',
'themepunch.rev': '../plugins/rs-plugin/js/jquery.themepunch.revolution.min',
'smoothscroll': '../plugins/SmoothScroll',
'json': '../plugins/requirejs-plugins/json',
'cldr': '../plugins/localisation/cldrjs/cldr',
'cldr-data': '../plugins/localisation/cldr-data',
'globalize': '../plugins/localisation/globalize/globalize',
'localise':'localisation/localise',
'GB': 'app'
},
shim: {
'marionette': {
deps: ['backbone'],
exports: 'Marionette'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'backbone.validation': {
deps: ['backbone', 'underscore']
},
'bootstrap': {
deps: ['jquery'],
},
'bootstrap-dialog': {
deps: ['bootstrap'],
},
'smoothscroll': {
deps: ['jquery.browser']
},
'themepunch.tools': {
deps: ['jquery']
},
'themepunch.rev': {
deps: ['themepunch.tools']
},
'jquery.browser': {
deps: ['jquery']
},
'waypoints': {
deps: ['jquery']
},
'jquery.video': {
deps: ['jquery']
},
'globalize': {
deps: ['cldr']
},
'json': {
deps: ['text']
}
}
});
require([
"GB",
"routes/application.router",
"bootstrap",
"core/validation"],
function (GB, AppRouter) {
GB.routers.application = new AppRouter();
GB.start();
});
app.js
define([
"marionette",
"core/GB.ini",
"globalize",
"localisation/localise",
"bootstrap-dialog",
"json!cldr-data/supplemental/likelySubtags.json",
"json!cldr-data/supplemental/plurals.json",
"json!cldr-data/supplemental/timeData.json",
"json!cldr-data/supplemental/weekData.json",
"json!localisation/messages/es.json",
"globalize/number",
"globalize/message",
"globalize/plural",
"modernizr",
"smoothscroll",
],
function (Marionette, AppIni, Globalize, Localise, Dialog, LikeSubtags, Plurals, TimeData, WeekData, Messages) {
var GB = window.GB = new Marionette.Application();
GB.User = {};
GB.routers = {};
Globalize.load(
LikeSubtags,
Plurals,
TimeData,
WeekData
);
Globalize.loadMessages(Messages);
Globalize.locale("es");
GB.Globalize = Globalize;
GB.Localise = Localise;
GB.Dialog = Dialog;
GB.Model = Backbone.Model.extend({});
GB.Collection = Backbone.Collection.extend({});
GB.Views = {
//if we do expand on these views they should probably get their own file.
Item: Marionette.ItemView.extend({}), //for a single model
Collection: Marionette.CollectionView.extend({}), //for a collection
Composite: Marionette.CompositeView.extend({}), //for a combination of a model and a collection
Layout: Marionette.LayoutView.extend({})
};
GB.session = new GB.Model();
GB.getUrl = function () {
return Backbone.history.location.origin + Backbone.history.location.pathname;
}
GB.getCurrentRoute = function () {
return Backbone.history.fragment;
};
GB.on("before:start", function () {
var RegionContainer = Marionette.LayoutView.extend({
el: "#app-container",
regions: {
header: "#header-wrapper",
main: "#main-region",
footer: "#footer-region",
dialog: "#dialog-region"
}
});
GB.regions = new RegionContainer();
});
GB.on("start", function () {
require(["modules/header/header.module"], function () {
GB.Header.Controllers.Overview.show();
});
require(["modules/footer/footer.module"], function () {
GB.Footer.Controllers.Overview.show();
});
AppIni.start();
Backbone.history.start();
if (GB.getCurrentRoute() === "")
Backbone.history.navigate("#home", { trigger: true });
});
return GB;
});
Foder Structure
enter image description here

Answer 1

Ok, my first guess was that parse method on the levelModel is never being called. But it should always be called on fetched. Moreover, I reread your question and saw that sometimes it did work for you.
So my second guess now is a race condition with requirejs. i.e: sometimes inside levels.js SubjectCollection is a real Backbone Collection and sometimes is undefined.
One of the reason for such a race can be Circular Dependencies. Can you share the full source? or verify that you dont have such a circulation?