Mark Mark - 4 months ago 27
jQuery Question

Using a jquery-ui widget

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

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.