web-dev-qa-db-ja.com

requirejsでjquery uiを使用する方法

アプリケーションで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エディションを使用しています。

javascriptjquery-uirequirejs
39
bodokaiser

Jquery-uiを含める必要があります。

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

jqueryはjquery-uiの依存関係であるため、自動的に必要になります。

さらに、これらのスクリプトはいずれも何も返しませんが、それらの変数はウィンドウオブジェクトに割り当てられます。それらを割り当てる必要はありません。

34
Austin

試してみる

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

JQuery UIの小さなサブセクションのみが必要な場合があります。たとえば、最近ソート可能が必要でしたが、すべてをロードしようとすると、jquery-uiの$.button()とブートストラップの$.button()の間に競合が発生しました。 jQuery UIにはAMDがサポートされるようになったため、RequireJSのビルドツールr.jsを使用して、必要なサブセットを正確にビルドしました。

0
hendrixski