Require.js avec jquery mobile-routeur

Question

je charge require.js avec jQuery inclus comme dans mon html:

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

Le contenu de mes requires.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"]); 
}); 

Et dans mon routeur .js je crée une nouvelle instance de la jquery mobile router plugin:

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

ce qui me donne cette erreur:Lorsque je génère $ et $ .mobile, ils sont tous les deux définis, $ .mobile.Router n'est pas défini.

Qu'ai-je fait de mal ici?

Answer 1

Mon problème est que j'ajouté jquery.mobile comme une dépendance pour jquery.mobile.router, ainsi jQuery mobile sera chargé en premier, alors que la documentation pour les états du routeur ceci:

The jQuery Mobile router javascript file must be loaded before jQuery Mobile.

C'est comment j'ai changé mes requires.js pour résoudre le problème:

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"]); 

maintenant, je juste besoin de mes router.js et de la charge jquery.mobile et jquery.mobile.router comme dépendances. Ordre de chargement est maintenant ceci:

1. jquery.mobile.router
2. jquery.mobile
3. routeur

Answer 2

Essayez ceci dans votre fichier router.js: -

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

En spécifiant jquery dans votre définition appel et passant $ comme argument, l'objet jquery $ et les fonctions associées définies dans jquery.mobile.router sont maintenant mis à disposition dans le portée de votre code (contenue dans le fichier router.js dans son intégralité).