使用jquery-ui小部件

Question

I want to use the sortable widget of jquery-ui. I installed jquery-ui with:

bower install jquery-ui

Im using require.js. I have added a section of jquery-ui/sortable:

paths: {
    ...
    'jquery.ui/sortable': 'bower_components/jquery.ui/ui/widgets/sortable'
    ...

In my module I import with:

define(
[
    'jquery.ui/sortable',
    ...
],
function(
    sortable,
    ...
) {

This will give me loads of errors because sortable.js then tries to import its dependencies. The only way I could get it working is to add a path for every dependency of sortable.js:

    'jquery.ui/sortable': 'bower_components/jquery.ui/ui/widgets/sortable',
    'jquery.ui/mouse': 'bower_components/jquery.ui/ui/widgets/mouse',
    'jquery.ui/scroll-parent': 'bower_components/jquery.ui/ui/scroll-parent',
    'data': 'bower_components/jquery.ui/ui/data',
    'ie': 'bower_components/jquery.ui/ui/ie',
    'version': 'bower_components/jquery.ui/ui/version',
    'widget': 'bower_components/jquery.ui/ui/widget',

This seems like a terribly arduous way of doing this. Also 'data', 'ie', 'version' and 'widget' only work if I don't namespace them.

Is this the correct way to use a jquery-ui widget?

Answer 1

If all the modules you ever refer to are ultimately under bower_components/jquery.ui/ui/widgets/ , then you could use a map instead of having a paths that lists each and every module:

map: {
  "*": {
    "jquery.ui": "bower_components/jquery.ui/ui/widgets"       
  }
}

This should map every request to jquery.ui/x to bower_components/jquery.ui/ui/widgets . Because a map transforms a module name to another module name, then any module in bower_components/jquery.ui/ui/widgets that imports from .. will get a module from bower_components/jquery.ui/ui .