Как использовать JQuery UI с requirejs

Question

Я хочу использовать пользовательский интерфейс jQuery addClass функция в моем приложении.

Кроме того, я использую обычный jQuery, подчеркивание, магистраль, все ярусные вместе с requirejs.

Я настроил пользовательский интерфейс jQuery следующим образом:

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 теперь поставляется с поддержкой AMD, поэтому я использовал инструмент сборки RequireJS r.js для создания именно того подмножества, которое мне было нужно.