2013-09-04 46 views
12

Trợ giúp!Trợ giúp BasicJJ cơ bản - Làm cách nào để gọi/xác định một hàm? Sử dụng onclick và jquery cũng như

Tôi kẻ siêu bối rối ... Tôi không có ý tưởng những gì tôi đang làm

Tôi đã nhìn vào RequireJS và hướng dẫn AMD & ví dụ cả ngày hôm qua và ngày hôm nay và đã đến thời điểm này, tuy nhiên Tôi nghĩ rằng tôi vẫn có sự hiểu lầm cơ bản về mô-đun .

  • tôi có một loạt các chức năng mà có được gọi là "onClick" từ các yếu tố HTML của tôi ...
    1. Làm thế nào để xác định chức năng của tôi với RequireJS vì vậy mà tôi có thể gọi họ? Vì vậy, bối rối:?/Ngoài ra tôi không hiểu
    2. làm thế nào để có được onLoad tôi chức năng để có được gọi là (trong trường hợp của tôi $ của nó (function(), nhưng làm thế nào để tôi mạc hội thảo này trong RequireJS)

tôi đang sử dụng 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> 

tôi có cần phải làm điều gì đó như:

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

hoặc có thể một cái gì đó như:

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

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

hoặc

function(loadPage)? 

tôi đã nhìn vào những câu hỏi tương tự:

Đây là những hữu ích quá, nhưng vẫn không có được nêu ra:

tôi đã cố gắng tách các chức năng vào tập tin khác, do đó Tôi có "index.html" và "Logic.js" ...đây là các ý chính:

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

SOLUTION

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

Trả lời

5

mã tối thiểu bạn cần phải (a) tạo ra và (b) tải một module trông giống như sau:

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

Rất khuyên đọc: http://requirejs.org/docs/api.html#define

+0

Ồ, cảm ơn! Tôi đặt các hàm bổ sung ở đâu, như "hideAllDivs()"? Tôi tạo một "xác định" khác và nó sẽ hoạt động để gọi nó bằng cách sử dụng hideAllDivs() ;? – Kayvar

+1

Đây, hãy thử điều này ... – Chris

+0

Tuyệt vời! Cảm ơn rất nhiều!! – Kayvar