javascript - Basic RequireJS Help - How do I call / define a function? Using onclick and jquery as well -
help!
i'm super confused guys... have no idea i'm doing
i've been looking @ requirejs , amd tutorials & examples day yesterday , today , got point, think still have fundamental misunderstanding module is.
- i have bunch of functions called "onclick" html elements...
- how define functions requirejs so can call them? confused :/ don't understand
- how onload function called (in case $(function(), how kick off in requirejs?)
i using node v0.10.12
<html> ... <head> <script data-main="" src="libraries/require.js"></script> ... <script> ... //i need these javascript files every function defined on 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, can't find function //do jquery stuff }); }); //function 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 need like:
//function get's called on body onload! define('loadpage', function loadpage() { return function(loadpage) { hidealldivs(); //more jquery stuff... createmodelmenu(); //more jquery stuff... } }); //and call loadpage.loadpage(); ? or maybe like:
//function 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 @ these similar questions:
- calling methods in requirejs modules html elements such onclick handlers
- how use jquery ui requirejs
- how can include jqueryui in modular backbone.js app using requirejs?
these helpful too, still not there yet:
- 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
i tried separating functions file, have "index.html" , "logic.js"... here gist:
=========================================
solution
the minimum code need (a) create , (b) load module looks this:
// (a) create 2 modules, 'hidealldivs' , 'loadpage'. define ('hidealldivs', [], function () { return function() { }; }); define('loadpage', ['hidealldivs'], function(hidealldivs) { return function() { hidealldivs(); //more jquery stuff... createmodelmenu(); //more jquery stuff... }; }); // (b) load loadpage module , call it. require(['jquery-blah-blah', 'loadpage', 'anothermodule'], function($, loadpage, anothermodule) { $(function() { loadpage(); }); }); highly recommended reading: http://requirejs.org/docs/api.html#define
Comments
Post a Comment