Require.js with jQueryMobile-Router

Question

I load require.js with jQuery included as in my html:

<script data-main="requires" src="lib/require-jquery.js"></script>

The contents of my require.js:

require.config( {
      paths: {
            "jquery.mobile": "lib/jquery.mobile",
            "jquery.mobile.router": "lib/jquery.mobile.router"

      },
      shim: {
            "jquery.mobile" : {
                "exports": "$.mobile"
            },
            "jquery.mobile.router": {
                  "deps": [ "jquery.mobile" ],
                  "exports": "$.mobile.Router"
            }

      }

} );

require(["jquery.mobile.router" ], function() {
    require(["router"]);
} );

And in my router.js, I create a new instance of the jquery mobile router plugin :

router = new $.mobile.Router(...);

Which gives me this error:

Uncaught TypeError: undefined is not a function

When I print $ and $ .mobile, they are both defined, just $ .mobile.Router is undefined.

What have I done wrong here?

Answer 1

My problem was that I added jquery.mobile as a dependency for jquery.mobile.router, so jQuery mobile is loaded first, where, as stated in the documentation for the router, this is:

javascript jQuery Mobile router jQuery Mobile.

require.js, :

require.config( {

    paths: {
        "jquery.mobile": "lib/jquery.mobile",
        "jquery.mobile.router": "lib/jquery.mobile.router"
    },

    shim: {
        "router": {
            "deps" : ["jquery.mobile"]
        },
        "jquery.mobile" : {
            "deps" : [ "jquery.mobile.router"],
            "exports": "$.mobile" 
        },

        "jquery.mobile.router": {
          "exports": "$.mobile.Router"
        }
    }
});

require(["router"]);

router.js jquery.mobile jquery.mobile.router . :

• jquery.mobile.router
• jquery.mobile

Answer 2

router.js: -

define(["jquery", "jquery.mobile.router"], function($) {
    // your js code in router.js
} );

jquery define $ , jquery $ , jquery.mobile.router, ( router.js ).