Now I know this question has been asked a million times before, but I still couldn't figure it out.
I have a huge amount of "defines" in various files. Most the time, this works, but a few of my modules are "not loaded for context" sometimes, even-though I put their names in the "define" statement.
===========================
index.js (Simplified for StackOverflow)
require.config({
baseUrl: '',
paths: {
//TOOLS
jquery: '../libraries/jquery-1.10.2.min',
socketio:'socket.io/socket.io',
jqueryLightBox:'../libraries/jquery.lightbox_me',
jqueryMigrate:'../libraries/jquery-migrate-1.2.1',
jqueryUI:'../libraries/jquery-ui-1.10.3.custom.min',
spinner:'../libraries/jquery.spin',
jQueryFormPlugin:'../libraries/jquery.form.min',
jQueryCookiePlugin:'../libraries/jquery.cookie',
json2:'../libraries/json2',
raphael:'../libraries/raphael-min',
raphaelPanZoom:'../libraries/raphael.pan-zoom.min',
bootstrap: '../libraries/bootstrap.min',
browserDetection: '../libraries/BrowserDetect',
qtip: '../libraries/jquery.qtip.min',
imagesloaded: '../libraries/imagesloaded.pkgd.min',
eventie: '../libraries/eventie',
eventEmitter: '../libraries/EventEmitter.min',
underscore: '../libraries/underscore-min',
underscoreString: '../libraries/underscore.string.min',
stacktrace: '../libraries/stacktrace',
elapseMeMin: '../libraries/elapseMe.min',
jqueryKeithWood: '../libraries/jquery.svg.min',
domReady: '../libraries/domReady',
//PAGES: (Simplified for StackOverflow)
TestView: '../javascripts/tests/TestView',
TestModel: '../javascripts/tests/TestModel',
TestController: '../javascripts/tests/TestController',
TestPanelView: '../javascripts/tests/Test-StartPanelView',
SocketLogic: '../javascripts/SocketLogic',
Logger: '../javascripts/Logger',
},
shim: {
'socketio': {
exports: 'io'
},
'spinner': {
exports: 'Spinner',
deps: ['jquery']
},
'raphael': {
exports: 'Raphael',
deps: ['jquery']
},
'raphaelPanZoom': {
deps: ['raphael']
},
'bootstrap': {},
'browserDetection': {
exports: 'BrowserDetect'
},
'underscore': {
exports: '_'
},
'underscoreString': {
deps: ['underscore'],
exports: '_'
},
'stacktrace': {
exports: 'printStackTrace'
},
'elapseMeMin': {
exports: 'elapseMe',
deps: ['jquery']
}
}
});
//////////////////
//1) Everything starts with this method. Will execute when the DOM is ready.
/////////////////
require(['domReady'], function (domReady) {
domReady(function () {
//This function is called once the DOM is ready.
//It will be safe to query the DOM and manipulate
//DOM nodes in this function.
//Start Loading!
require(['TestController'], function(TestController)
{
TestController.firstMethod();
});
});
});
TestController.js (Simplified for StackOverflow)
define(['TestModel', 'TestView', 'SocketLogic', 'Logger', 'TestPanelView'],
function (TestModel, TestView, socketLogic, Logger, TestPanelView)
{
return {
firstMethod: function()
{
TestModel.doSomething();
TestView.doSomethingElse();
socketLogic.andAnother();
Logger.log("hi");
TestPanelView.updateSomething();
this.anotherMethod();
},
anotherMethod: function()
{
console.log("hello");
}
}
});
===========================
But, once in a while, I'll randomly get just one of them to "not be loaded for context", eventhough the rest were just fine:
Uncaught Error: Module name "TestPanelView" has not been loaded yet for context: _
http://requirejs.org/docs/errors.html#notloaded
===========================
Instead of
TestPanelView.updateSomething();
I have been doing:
var testPanelView = require('TestPanelView');
testPanelView.updateSomething();
Which works, BUT.. shouldn't it have already been loaded into context since I put it in the header? Why this one? It's the same as all the others!
This also works, but again I'm just doing this one by one and it feels wrong!
Instead of
TestPanelView.updateSomething();
Sometimes I do this:
require(['TestPanelView'], function(testPanelView){
testPanelView.updateSomething();
});
TestController.js (Simplified for StackOverflow)
define(['require', 'TestModel', 'TestView', 'SocketLogic', 'Logger', 'TestPanelView'],
function (require)
{
var TestModel = require('TestModel')
var TestView = require('TestView');
var SocketLogic = require('SocketLogic');
var Logger = require('Logger');
var TestPanelView = require('TestPanelView');
return {
firstMethod: function()
{
TestModel.doSomething();
TestView.doSomethingElse();
SocketLogic.andAnother();
Logger.log("hi");
TestPanelView.updateSomething();
this.anotherMethod();
},
anotherMethod: function()
{
console.log("hello");
}
}
});
Here I get the "not loaded for context" error again, but this time for all of them.
===========================
I've been manually patching each one that I find like this, which is not happening to all, only some here and there, which feels like monkey patching... I'd like to know what I'm doing wrong here :( Anyone know?
Note: I'm using RequireJS v.2.1.10
Answer to failed attempt #1
define(['require', 'TestModel', 'TestView', 'SocketLogic', 'Logger', 'TestPanelView'],
function (require, testModel, testView, socketLogic, logger, testPanelView) {
var firstMethod = function() {
testModel.doSomething();
testView.doSomethingElse();
socketLogic.andAnother();
logger.log("hi");
testPanelView.updateSomething();
this.anotherMethod();
};
var anotherMethod = function(){
console.log("hello");
}
return {
firstMethod: firstMethod,
anotherMethod: anotherMethod
});
And don't forget, the opening curly bracket must come after the ending round bracket of the function in the same line.