2

I'm sitting on my first attempt on implementing Require.js and although I'm trying to follow both of these tutorials (here and here) I don't quite get it to work. This is what I have so far:

Inside my index file:

<script type="text/javascript" data-main="../js/main" src="../js/libs/require/require.js"></script>

Inside main.js

require.config({ baseUrl: "../js/",
  paths: {       
   "jq-loader":    "libs/jquery/jquery",
   "jqm-loader":   "libs/jquery-mobile/jquery-mobile",
   "someplug":     "libs/someplug/somplug",
   }
 });
// define app and dependencies??? - not sure what goes here? All plugins I'm using?
require(['app','order!libs/jquery/jquery', 'order!libs/jquery-mobile/jquery-mobile'], 

function(App){
    App.start();
    });

Inside jquery.js

 define([ 'order!libs/jquery/jquery.min' ], function(){ return $; });

Inside jquery.js (which is depending on Jquery)

 // ERROR here in "mobile" being undefined
 define(['order!libs/jquery-mobile/jquery-mobile.min'], function(){ return mobile; });

And app.js

define([ 'jq-loader', 'jqm-loader'], function($, mobile){
    var start = function() {
    $(document).ready(function() {
        alert("Hello world!");
        })
      }
     return {"start":start};
   });

I'm happy I have made it so far, but would really like to see everything clicking. Right now, I'm getting an error mobile is not defined inside my jquery-mobile.js file. I guess because Jquery-Mobile does not really belong where it is...

Can someone shed some light? Thanks a lot!

EDIT:
Here is a link to my sample setup

Community
  • 1
  • 1
frequent
  • 27,643
  • 59
  • 181
  • 333

1 Answers1

6

Seems to me that at that moment jqm just knows nothing about jquery. So you get an error. If to use such loaders, maybe it's needed to load jquery in one require block. Than in callback load jqm using one more require. But you don't need these wrappers-loaders to load jquery with jqm.

In main js at first load jquery, than jqm. That will be enough. Also you don't have to define them in your app.js.

Main.js should look something like:

require.config({ baseUrl: "../js/",
  paths: {  
   "app": "path to app",
   "jquery":    "path to jquery",
   "jqm":   "path to jqueryMobile",
   "someplug":     "libs/someplug/somplug",
   }
});
require(['order!jquery', 'order!jqm', 'app'], 

function(jquery, jqm, App){
    App.start();
    });

And your app.js:

define([], function(){
  var start = function() {
  $(document).ready(function() {
    alert("Hello world!");
  })
  }
  return {"start":start};
  });

Please, let me know if it won't help and upload your sources somewhere. Regards.

sleepwalker
  • 1,032
  • 1
  • 9
  • 15
  • Thanks so far. Trying this now. I will post again, if it doesn't work. – frequent Apr 23 '12 at 22:03
  • Ok. I'm still getting my error inside jquery-mobile.js, return "mobile" being undefined... What do I have to return here? I'm putting up the source, too. Will be a minute. – frequent Apr 23 '12 at 22:11
  • I meant, that you should remove your loaders and in config provide path to jquery.min and jquery-mobile.min libs. – sleepwalker Apr 23 '12 at 22:29
  • Getting closer... and an error, that App.start() -inside main.js- is not a function – frequent Apr 23 '12 at 22:37
  • Looked through the source code again and cannot find 'app' in your config. – sleepwalker Apr 23 '12 at 22:53
  • do I have to config "app" with a path, if it's sitting in the js folder vs. Jquery sitting in js/jquery/?. I'd have to config... app: "" then? – frequent Apr 23 '12 at 22:56
  • You may not add it to config. But in this case it's needed to add .js when you load it. – sleepwalker Apr 23 '12 at 23:04
  • mh. all files are loaded in Firebug console, including app.js. So why is App.start() not a function, if I defined it to be so inside app.js... Should we move to chat for this? – frequent Apr 23 '12 at 23:13
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/10418/discussion-between-sleepwalker-and-frequent) – sleepwalker Apr 23 '12 at 23:16