Mark Mark - 1 year ago 125
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:

) {

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download