javascript - Require.js Shim for loading JQuery UI and other JQuery Packages - Stack Overflow

admin管理员组

文章数量:1391934

I am trying to load JQuery-Ui with a shim, but JQueryUi keeps timing out when I try to load it even when I know the path is correct.

require.config({
paths: {
    jQuery: 'libs/jquery-wrapper',
    jQueryUi: 'libs/jquery-ui-min',
    jQuerySelectmenu: 'libs/jquery.ui.selectmenu',
    Underscore: 'libs/underscore-wrapper',
    Backbone: 'libs/backbone-wrapper',
},
shim: {'Backbone': {
          //These script dependencies should be loaded before loading
          //backbone.js
          deps: ['Underscore', 'jQuery'],
          //Once loaded, use the global 'Backbone' as the
          //module value.
          exports: 'Backbone'
      },
      'jQueryUi': {
          deps: ['jQuery'],
      },
      'jQuerySelectmenu': {
          deps: ['jQuery', 'jQueryUi']
      }
  }  
});

require([
    'jQuery',
    'Underscore',
    'Backbone',  
    'jQueryUi',
    'jQuerySelectmenu'  
], 
    function(App) {
        require(['order!src/app']
     ,     function (App) {
    App.initialize();
}); 
});

I am trying to load JQuery-Ui with a shim, but JQueryUi keeps timing out when I try to load it even when I know the path is correct.

require.config({
paths: {
    jQuery: 'libs/jquery-wrapper',
    jQueryUi: 'libs/jquery-ui-min',
    jQuerySelectmenu: 'libs/jquery.ui.selectmenu',
    Underscore: 'libs/underscore-wrapper',
    Backbone: 'libs/backbone-wrapper',
},
shim: {'Backbone': {
          //These script dependencies should be loaded before loading
          //backbone.js
          deps: ['Underscore', 'jQuery'],
          //Once loaded, use the global 'Backbone' as the
          //module value.
          exports: 'Backbone'
      },
      'jQueryUi': {
          deps: ['jQuery'],
      },
      'jQuerySelectmenu': {
          deps: ['jQuery', 'jQueryUi']
      }
  }  
});

require([
    'jQuery',
    'Underscore',
    'Backbone',  
    'jQueryUi',
    'jQuerySelectmenu'  
], 
    function(App) {
        require(['order!src/app']
     ,     function (App) {
    App.initialize();
}); 
});

• javascript
• jquery
• requirejs

Share Improve this question Follow asked Jul 5, 2012 at 14:20 user784756user784756 2,37344 gold badges3030 silver badges4444 bronze badges 2

• Not sure if this is still an open question or not I haven't actually tested anything to verify, but I notice that you have an extra ma after the deps array in the jQueryUI shim. I'm guessing that would prevent the JavaScript from running properly. – CStroliaDavis Commented Sep 27, 2012 at 20:56
• Another thing (that does not effect the success of the loading of jquery-ui), the App variable in the outmost scope (you do not use it there) is jQuery. – Trond Hatlen Commented Oct 4, 2012 at 9:00

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I think what damee is offering stands for older version of requireJs. Just folllow this tutorial as I did: Load jQuery UI with requireJS

Try to use this project https://github./jrburke/jqueryui-amd to translate your jqueryui to modularized version. Then you can simply use it:

define(['jquery', 'jqueryui/tabs'], function($){
    $('#tabs').tabs();    
});

With requirejs config:

requirejs.config({
paths: {
    'jqueryui': '/javascript-cdn/jqueryui/' //output form jqueryui-amd
}, 
shim: {
    'jquery': {
        deps: [], 
        init: function(){
            return $; 
        }
    },        
    'jqueryui': {
        deps: ['jquery'] 
    }
}
});

I hope this helps.

本文标签： javascriptRequirejs Shim for loading JQuery UI and other JQuery PackagesStack Overflow