Menu
Help!
I'm super confused guys... I have no idea what I'm doing
I've been looking at RequireJS and AMD tutorials & examples all day yesterday and today and got to this point, however I think I still have a fundamental misunderstanding as to what a module is.
I am using Node v0.10.12
<html>
...
<head>
<script data-main="" src="libraries/require.js"></script>
...
<script>
...
//I really need all these javascript files for every function defined on this page...
require(['simulatorConfiguration.js',
'modelConfiguration.js',
'libraries/jquery-1.10.2.min.js',
'libraries/jquery.lightbox_me.js',
'libraries/jquery-migrate-1.2.1.js',
'libraries/raphael-min.js'], function(start) {
$(function() {
loadPage(); //<--- CALL LOAD PAGE, but it can't find the function
//do some jquery stuff
});
});
//function that get's called on body onload!
define('loadPage', function loadPage()
{
hideAllDivs();
//more jquery stuff...
createModelMenu();
//more jquery stuff...
});
define('hideAllDivs', function hideAllDivs()
{
//some UI stuff...
});
define('createModelMenu', function createModelMenu()
{
//some jquery stuff...
});
define('createTestMenu', function createTestMenu(model_key)
{
var javascriptLoc = "models/" + models[model_key].modelDir + "/testConfiguration.js";
require([javascriptLoc], function(util) {
showModelInformation(model_key);
//some Jquery stuff...
});
});
define('showModelInformation', function showModelInformation(model_key)
{
hideAllDivs();
//some jquery stuff
});
define('showTest', function showTest(test_key)
{
hideAllDivs();
//some RaphaelJS stuff...
});
define('takeControl', function takeControl()
{
//some UI stuff
});
define('giveUpControl', function giveUpControl()
{
//some UI stuff...
});
</script>
</head>
<body>
...
<li><a href="#" id="AoD" onclick="showTests(this.id)">Audio On Demand</a></li>
...
<input type="submit" value="Yes, Release Control" onclick="giveUpControl()">
....
<input type="submit" value="Take Control" onclick="takeControl()">
....
</body>
Do I need to do something like:
//function that get's called on body onload!
define('loadPage', function loadPage()
{
return function(loadPage)
{
hideAllDivs();
//more jquery stuff...
createModelMenu();
//more jquery stuff...
}
});
//and call it with loadPage.loadPage(); ?
or maybe something like:
//function that get's called on body onload!
define('loadPage', function loadPage()
{
return function()
{
hideAllDivs();
//more jquery stuff...
createModelMenu();
//more jquery stuff...
}
});
or
function(loadPage)?
I did look at these similar questions:
These were helpful too, but still not there yet:
I tried separating the functions into another file, so I have "index.html" and "Logic.js"... here is the gist:
=========================================
https://gist.github.com/anonymous/6470443
288
RequireJS is a JavaScript library and file loader which manages the dependencies between JavaScript files and in modular programming. It also helps to improve the speed and quality of the code.
shim: Configure the dependencies, exports, and custom initialization for older, traditional "browser globals" scripts that do not use define() to declare the dependencies and set a module value. Here is an example. It requires RequireJS 2.1. 0+, and assumes backbone. js, underscore.
It is used by RequireJS to know which module to load in your application. For instance − <script data-main = "scripts/main" src = "scripts/require.js"></script> To include the Require. js file, you need to add the script tag in the html file. Within the script tag, add the data-main attribute to load the module.
Requiring jQuery and jQuery UI The require() function is AMD's mechanism for specifying and loading dependencies; therefore, we can add one to our app. js file to load the necessary files. The following loads jQuery UI's autocomplete widget.
The minimum code you need to (a) create and (b) load a module looks something like this:
// (a) Create two modules, 'hideAllDivs' and 'loadPage'.
define ('hideAllDivs', [], function () {
return function() {
};
});
define('loadPage', ['hideAllDivs'], function(hideAllDivs)
{
return function()
{
hideAllDivs();
//more jquery stuff...
createModelMenu();
//more jquery stuff...
};
});
// (b) Load the loadPage module and call it.
require(['jquery-blah-blah', 'loadPage', 'anotherModule'], function($, loadPage, anotherModule) {
$(function() {
loadPage();
});
});
Highly recommended reading: http://requirejs.org/docs/api.html#define
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
