如何在requirejs中使用jquery ui

Question

我想在我的應用程序中使用jQuery UI的addClass函數。

除了我使用正常的jQuery，下划線，主干與requirejs一起分層。

我已經像這樣配置了jQuery UI：

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']
    }

});

在我的應用程序中：

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

不幸的是，這只是普通的addClass而不是來自jQuery UI的動畫。

PS：我使用完整的jQuery版本。

Answer 1

你需要包含jquery-ui：

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

應該自動要求jquery，因為它是jquery-ui的依賴項

此外，這些腳本都不會返回任何內容，但它們的變量將分配給窗口對象。 無需分配它們。

Answer 2

嘗試

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

Answer 3

有時您只需要一小部分jQuery UI。 例如，我最近需要排序，但如果我試圖加載整個事情，然后我得到的沖突$.button()對jQuery的UI和$.button()自舉。 jQuery UI現在提供AMD支持，因此我使用RequireJS的構建工具r.js來構建我需要的子集。