Basic RequireJS Help - How do I call / define a function? Using onclick and jquery as well

Question

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 have a bunch of functions that get called "onClick" from my HTML elements...
1. How do I define my functions with RequireJS so that I can call them? So confused :/ Also I don't understand
2. how to get my onLoad function to get called (in my case its $(function(), but how to I kick this off in RequireJS?)

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/6439418

=========================================

SOLUTION

https://gist.github.com/anonymous/6470443

Chris · Accepted Answer · 2013-09-05T19:18:07.550

5

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

edited Sep 05 '13 at 19:18

answered Sep 04 '13 at 17:36

Chris

5,876
3
43
69

Oh, thanks! Where do I put additional functions, like "hideAllDivs()"? Do I create another "define" and it would work to call it by using hideAllDivs();? – Katie Sep 04 '13 at 17:52
getting "undefined is not a function" when trying to call "loadPage()" https://gist.github.com/anonymous/6453705 I also tried createLoadPage(hideAllDivs) instead of createLoadPage(), and tried calling createLoadPage() instead of loadPage().. ideas? – Katie Sep 05 '13 at 17:56
1

Yup. When calling require()/define(), the first array and the function need to line up. See the updated example. I removed a bunch of stuff that is optional and just there for human readability, so what's left is the minimum needed. (You may find that your version of jQuery doesn't work using this, in which case rename the first argument of the function from $ to __dontuse or something.) – Chris Sep 05 '13 at 19:17

Basic RequireJS Help - How do I call / define a function? Using onclick and jquery as well

SOLUTION

1 Answers1