How do I use jquery ui with requirejs

Question

I want to use jQuery UI's addClass function in my application.

Beside I am using the normal jQuery, underscore, backbone all tiered together with requirejs.

I have configured jQuery UI like this:

require.config({

    deps: ["main"],

    paths: {
        "text": "lib/text"
        , "jquery": "lib/jquery"
        , "jquery-ui": "lib/jquery-ui"
        , "underscore": "lib/underscore"
        , "backbone": "lib/backbone"
        , "bootstrap": "lib/bootstrap"
        , "templates": "../templates"
    },

    shim: {
        "jquery-ui": {
            exports: "$",
            deps: ['jquery']
        },
        "underscore": {
            exports: "_"
        },
        "backbone": {
            exports: "Backbone",
            deps: ["underscore", "jquery"]
        },
        "bootstrap": ['jquery']
    }

});

In the application I do:

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
    $('div').addClass('white');
});

Unfortunately this only does the normal addClass not the animated one from jQuery UI.

PS: I use the full jQuery edition.

off-subject: `white` is a really bad classname; classnames should not include the css that is assigned to it so you can change the underlying CSS and not affect the semantic value of the class. — Ruan Mendes, Aug 24 '12 at 16:26
posible duplicate: http://stackoverflow.com/questions/10237384/how-can-i-include-jqueryui-in-my-modular-backbone-js-app-using-requirejs — Martin Borthiry, Aug 24 '12 at 16:29

Austin · Accepted Answer · 2012-08-24T16:37:35.710

34

You need to include jquery-ui:

define(['jquery-ui', 'backbone'], function() {
    $('div').addClass('white');
});

jquery should be required automatically as it is a dependency of jquery-ui

Additionally, none of these scripts return anything, but their variables are assigned to the window object. No need to assign them.

edited Aug 24 '12 at 16:37

answered Aug 24 '12 at 16:26

Austin

6,026
2
24
24

Shouldn't need to list underscore? Since it's already listed as a dependency of backbone? – Ruan Mendes Aug 24 '12 at 16:27
IDK if jquery-ui will correctly add itself to `$` if jQuery doesn't get assigned to `$` in the closure – nickaknudson Aug 24 '12 at 16:28
No, actually they do not need to be assigned at all. They assign themselves to the window object (`window.$`, `window._`, `window.Backbone`). Require works by passing in the return value of the included file, these libraries return nothing, but set their global references. – Austin Aug 24 '12 at 16:32
What if different versions are needed, compatibility is on, or multiple `$` libraries are used? – nickaknudson Aug 24 '12 at 16:33
Regardless, this is not how require works with these libraries. If this was kept as a function, the values passed in would be null because the scripts return nothing, but preform a global action. – Austin Aug 24 '12 at 16:35
you have to assign them. It can be that some modules work without but there can be some which don't have access to them – bodokaiser Aug 24 '12 at 16:35
Inclusion of these core libraries should also go in your `main.js` file, in a `Require()` call. – Austin Aug 24 '12 at 16:38
@Austin How to assign modules that actually return the module and use jquery-ui and backbone at the same time? – jgomo3 Jun 12 '13 at 16:27
I feel like not including JQuery defeats the purpose of using Require.JS... the idea is to break away from using global variables. Even if it seems unnecessary, it opens a door that would have otherwise been closed. – Robert Aug 20 '14 at 23:13

score 3 · Answer 2 · answered Aug 24 '12 at 16:26

3

try

define(['jquery', 'jquery-ui', 'underscore', 'backbone'], function($, ui, _, Backbone) {
    // $.ui should be defined, but do
    // $.ui = ui if its not
    $('div').addClass('white');
});

answered Aug 24 '12 at 16:26

nickaknudson

4,769
2
15
16

1

Don't need jquery, all the other ones already list it as a dependency. – Ruan Mendes Aug 24 '12 at 16:27
I've never used requirejs before, so I am just shooting in the dark, but I was concerned about `$` being defined for jquery-ui to add itself to `$.ui` within the closure. – nickaknudson Aug 24 '12 at 16:31

score 0 · Answer 3 · edited Jul 04 '16 at 07:42

0

Sometimes you only need a small subsection of jQuery UI. For example, I recently needed sortable, but if I tried to load the whole thing then I got a conflict between $.button() on jquery-ui and $.button() in bootstrap. jQuery UI now comes with AMD support, So I used RequireJS' build tool r.js to build exactly the subset that I needed.

edited Jul 04 '16 at 07:42

T J

42,762
13
83
138

answered Apr 17 '15 at 18:38

hendrixski

1,124
1
12
20

How do I use jquery ui with requirejs

3 Answers3

Linked