No, you're not doing it quite correctly. You're "main" JavaScript file, defined by the data-main
attribute of the (one and only) <script>
tag, should kick off the app. All other JavaScript files should represent "modules," that is, collections of functionality that relate to specific purposes.
Note that I don't understand what your app is doing, so hopefully the following example at least gets you started.
1. Load the main script:
<script data-main="main" src="/MVCTesting/Scripts/ThirdParty/RequireJS/require.js"></script>
2. "main.js" kicks off the app:
require(["AMDSpecs"], function(specs) {
specs.init();
});
3. Break up your scripts into individual files representative of "modules". In this case, your "AMDSpecs" is a module:
/* AMDSpecs.js */
define(["jquery"], function($) {
// do setup work here
return {
setupEvents: function() {
$("#output").text("jQuery is working!");
},
init: function() {
this.setupEvents();
}
};
});
Note that it isn't helpful to embed require
calls within require
calls unless there is a reason to conditional or lazily load a script.
P.S. Don't use the ".js" extension when requiring scripts -- that is done automatically by RequireJS.