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.

昨天和今天我一直在关注RequireJS和AMD的教程和示例,并且到了这一点,但是我认为我仍然对模块是什么有一个根本的误解。

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?)

我有一堆函数从我的HTML元素中被称为“onClick”...如何使用RequireJS定义我的函数以便我可以调用它们?很困惑:/我也不明白如何让我的onLoad函数被调用(在我的情况下是$(function(),但是如何在RequireJS中启动它?)

I am using Node v0.10.12

我使用的是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...
        }
});

function(loadPage)?

I did look at these similar questions:

我确实看过这些类似的问题:

Calling methods in RequireJs modules from HTML elements such as onclick handlers

从HTML元素(如onclick处理程序)调用RequireJs模块中的方法

How do I use jquery ui with requirejs

如何在requirejs中使用jquery ui

How can I include jQueryUI in my modular backbone.js app using RequireJS?

如何使用RequireJS在我的模块化backbone.js应用程序中包含jQueryUI?

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:

我尝试将函数分成另一个文件,所以我有“index.html”和“Logic.js”...这里是要点:

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

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

SOLUTION

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

1 个解决方案

#1

The minimum code you need to (a) create and (b) load a module looks something like this:

(a)创建和(b)加载模块所需的最小代码如下所示:

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

强烈推荐阅读:http://requirejs.org/docs/api.html#define

#1