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

1 Answer 1

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.

9
  • Thanks so far. Trying this now. I will post again, if it doesn't work.
    – frequent
    Apr 23, 2012 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, 2012 at 22:11
  • I meant, that you should remove your loaders and in config provide path to jquery.min and jquery-mobile.min libs. Apr 23, 2012 at 22:29
  • Getting closer... and an error, that App.start() -inside main.js- is not a function
    – frequent
    Apr 23, 2012 at 22:37
  • Looked through the source code again and cannot find 'app' in your config. Apr 23, 2012 at 22:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.