如何在requirejs中使用jquery ui

时间:2012-08-24 16:22:46

标签: javascript jquery-ui requirejs

我想在我的应用程序中使用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版本。

3 个答案:

答案 0 :(得分:34)

您需要包含jquery-ui:

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

应该自动要求jquery,因为它是jquery-ui

的依赖项

此外,这些脚本都不会返回任何内容,但会将其变量分配给窗口对象。无需分配它们。

答案 1 :(得分:3)

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

答案 2 :(得分:0)

有时你只需要一小部分jQuery UI。例如,我最近需要排序,但是如果我尝试加载整个内容,那么我在jquery-ui上的$.button()和引导程序中的$.button()之间会发生冲突。 jQuery UI现在提供AMD支持,所以我使用RequireJS的构建工具r.js来构建我需要的子集。