微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript – Basic RequireS帮助 – 如何调用/定义函数?也使用onclick和jquery

帮帮我!

我是超级困惑的家伙…我不知道我在做什么

我一直在看着RequireJS和AMD教程昨天和今天的一天的例子,到了这一点,但是我认为我对于一个模块还有一个根本的误解.

>我有一堆从我的HTML元素调用“onClick”的函数

>如何用RequireJS定义我的函数,以便我可以调用它们?所以困惑:/我也不明白
>如何获取我的onLoad函数调用(在我的例子中它的$(function(),但是如何在RequireJS中启动它?)

我正在使用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>

我需要做如下事情:

//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(); ?

或者可能是这样:

//function that get's called on body onload!
define('loadPage',function loadPage()
{
    return function()
        {
            hideAllDivs();
            //more jquery stuff...

            createModelMenu();
            //more jquery stuff...
        }
});

要么

function(loadPage)?

我看过这些类似的问题:

> Calling methods in RequireJs modules from HTML elements such as onclick handlers
> How do I use jquery ui with requirejs
> How can I include jQueryUI in my modular backbone.js app using RequireJS?

这些也是有帮助的,但还没有:

> http://hippieitgeek.blogspot.se/2013/07/load-jquery-ui-with-requirejs.html
> http://www.requirejs.org/jqueryui-amd/example/webapp/app.html
> https://github.com/jrburke/jqueryui-amd

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

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

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

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

解决方法

您需要(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();
    });
});

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


jQuery表单验证提交:前台验证一(图文+视频)
jQuery表单验证提交:前台验证二(图文+视频)
jQuery如何实时监听获取input输入框的值
JQuery怎么判断元素是否存在
jQuery如何实现定时重定向
jquery如何获取复选框选中的值
jQuery如何清空form表单数据
jQuery怎么删除元素节点
JQuery怎么循环输出数组元素
jquery怎么实现点击刷新当前页面