How can I include jQueryUI in my modular backbone.js app using RequireJS?

Question

I want to include jQueryUI in my backbone.js app using RequireJS. The main.js file included in my index.html is as follows:

require.config({
    paths: {
            


        

Answer 1

The other answers are a bit outdated now. JQuery UI comes with AMD support. If you want the whole project just use bower install jquery-ui and then add it to paths. No shim needed.

If you want to load a subset of jQuery UI that you need in your app (while not loading extra bloat) then just use bower install jquery-ui to get the whole thing then use RequireJS build tool called r.js to create an AMD package of exactly the files you need.

Answer 2

While kujakettu's answer is at least partially correct I also had to specify jQuery as a dependancy in my shim to be sure jQuery was loaded before jQuery-UI.

e.g.

require.config({
    baseUrl: 'scripts/modules',
    paths:{
        jquery:'../libs/jquery',
        jqueryUI:"../libs/jquery-ui",
        underscore:'../libs/underscore',
        backbone:'../libs/backbone'
    },
    shim: {
        jqueryUI: {
            deps: ['jquery']
        },
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },
        waitSeconds: 15
    }
});

Answer 3

Quite old post. There's a tool available to convert jquery ui files to AMD version, created by jrburke. Hope it would be useful!

Answer 4

You can include all files that only patch some other object (like jQuery UI) in your main file as follows (you need to make sure jQuery is loaded before jQuery UI):

require(['jquery', 'app', 'jqueryui'], function ($, App) { App.start(); });

Another approach is to include jQuery UI in every module as you already mentioned.

I personally prefer first approach even though it's hiding dependencies.