requirejs jquery plugins jquery non dépendants multiples comme jquery-ui et jqGrid

Question

Je ne peux pas commander les modules non-AMD avec shim config.

Ma config shim est comme ceci. Même si je voulais utiliser require-jquery.js mais encore deux modules non-AMD seront jquery ui et jqGrid. jqGrid lui-même a quelques plugins qui ne doivent être chargés que lorsque jqGrid a été chargé.

requireconfig.js

require.config({ 
    baseUrl: '../jsp', 
    paths: { 
     app: '../js/app', 
     jquerygrid: 'http://view.jqueryui.com/grid', 
     lib: '../js/lib', 
     plugins: '../js/plugins', 
     jquery: '../js/lib/jquery-1.9.1', 
     jqueryui: [ 'http://ajax.googleapis.com/ajax/libs/jqueryui/'+ 
      '1.9.2/jquery-ui'], 
     canjs: 'http://canjs.us/release/latest/can.view.mustache', 
     uigrid:'../js/plugins/mydataview', 
     jqgrid: '../js/plugins/grid.locale-en' 
    }, 
    shim: { 
     jqueryui: { 
      exports: "$", 
      deps: ['jquery'] 
     }, 
     uigrid: { 

      deps:[ 
      'jqueryui',  
      'http://view.jqueryui.com/grid/ui/jquery.ui.dataview.js', 
      'http://view.jqueryui.com/grid/ui/jquery.ui.grid.js', 
      'http://view.jqueryui.com/grid/ui/jquery.ui.observable.js', 
      'http://view.jqueryui.com/grid/ui/jquery.ui.dataviewlocal.js', 
      'http://view.jqueryui.com/grid/grid-spf/pager.js', 
      'http://view.jqueryui.com/grid/grid-editing/grid.selectable.js', 
      'http://view.jqueryui.com/grid/grid-editing/navigator.js', 
      'http://view.jqueryui.com/grid/grid-editing/localstore.js', 
      'http://view.jqueryui.com/grid/grid-editing/helpers.js', 
      'http://view.jqueryui.com/grid/external/jquery.tmpl.js', 
      'http://view.jqueryui.com/grid/grid-spf/grid-filter.js', 
      'http://view.jqueryui.com/grid/grid-spf/grid-sort.js' 
      ] 
     }, 
     canjs:{ 
      deps: ['jquery','http://canjs.us/release/1.1.4/can.jquery.js'] 
     }, 
     jqgrid:['jqueryui','../js/plugins/jquery.jqGrid.src.js'] 
    } 
}); 

Et mon appel HTML est

<script type="text/javascript" src="../js/require.js"></script> 
<script type="text/javascript" src="../js/requireconfig.js"></script> 

<script type="text/javascript"> 
require(['jqgrid'], function($){ 
    $("#mygrid").jqGrid({ 
     pager: "#mygridpager" 
    }) 
}); 
</script> 

Dans différentes pistes, je reçois différentes erreurs:

Parfois:

Uncaught ReferenceError: jQuery n'est pas défini ..... jquery.jqGrid.src.js: 3589

Bien sûr, cela ne donne pas un erro. Mais cela ressemble à un piratage car requirejs ne supporte pas l'ordre. Les appels imbriqués sont également moins élégants. Peut être s'il y a un requirejs différé comme quand(). Then() like chain peut le rendre meilleur.

<script type="text/javascript"> 
require(['jquery'], function(){ 
    require(['jqgrid'], function(){ 
     $("#mygrid").jqGrid({ 
      pager: "#mygridpager" 
     }); 
    }); 
}); 
</script> 

Answer 1

Ce sample fiddle n'a pas d'erreurs lorsque les fichiers JS sont chargés par RequireJS.

Je pense que le noeud du problème est le fichier '../js/plugins/jquery.jqGrid.src.js' est chargé par RequireJS, mais RequireJS ne sait pas que ce fichier lui-même a des dépendances. Ainsi, lorsque ce fichier est chargé, ses dépendances n'ont pas encore été chargées.

Vous devrez donc être complètement explicite avec RequireJS pour savoir quels modules dépendent des autres modules. Par exemple ajouter plus de pistes et plus cales:

chemins:

jqgridlocale: 'http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en', 
    jqgrid: 'http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min' 

Cales:

jqgrid:{ 
     deps:['jqueryui','jqgridlocale'] 
    }, 
    jqgridlocale:{ 
     deps:['jqueryui'] 
    } 

Maintenant RequireJS sait que les deux jqgrid et jqgridlocale besoin jqueryui (et donc jquery) avoir été chargé premier.

Je voudrais aussi explicitement require() jQuery, comme vous l'utilisez directement. Il est plus informatif en lisant le code de voir que jQuery est utilisé directement.

require(['jquery','jqgrid'], function($){ 
    $("#mygrid").jqGrid({ 
     pager: "#mygridpager" 
    }) 
});