How do I use jquery ui with requirejs

问题:

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.

回答1:

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.

回答2:

try

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

回答3:

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.