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: {
            jquery: 'libs/jquery/jquery-1.7.2.min',
            jqueryui: 'libs/jquery/jquery-ui-1.8.18.custom.min',
            underscore: 'libs/underscore/underscore-min',
            backbone: 'libs/backbone/backbone-optamd3-min',
            text: 'libs/require/text',
            templates: 'templates'
       }

});

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

And for each model/view/router file, I just include the 'jquery' namespace at the start of the "define" block as follows:

define([
    'jquery',
    'underscore',
    'backbone',
    'views/categoryview',
    'text!templates/category.html'
    ], function($, _, Backbone, CategoryView, categoryTemplate){
        // Here comes my code
});

But the jQueryUI could not be used in these files. Is there something wrong with my code? Or should I also include the "jqueryui" in each "define" block? But if I include "jqueryui" in the "define" block, How should I name it in the function to avoid name conflict with jquery?

MdaG · Accepted Answer · 2013-06-24 12:33:27Z

4

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
    }
});

answered Jun 24, 2013 at 12:33

MdaG

2,7302 gold badges36 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aakash Goel · Accepted Answer · 2013-04-09 09:54:56Z

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!

edited Apr 9, 2013 at 9:54

answered Apr 9, 2013 at 9:48

Aakash Goel

1,1792 gold badges13 silver badges22 bronze badges

Comments

T J · Accepted Answer · 2016-07-04 07:45:40Z

2

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.

edited Jul 4, 2016 at 7:45

T J

43.2k13 gold badges87 silver badges142 bronze badges

answered Apr 20, 2012 at 12:55

kujakettu

1182 bronze badges

6 Comments

chaonextdoor Over a year ago

So what you mean is to include jqueryui in my main.js file as you provided and in every module, there is no need to worry about the jqueryui, I just need to include the jquery and everything will be up and running?

kujakettu Over a year ago

Yes, when you include jquery ui the first time, it adds more stuff to the original jQuery-object. After that, all ui functionality will be available with the jQuery-object. Same applies if you have other jquery plugins.

Willem D'Haeseleer Over a year ago

This approach is wrong requirejs does not guarantee that jquery gets loaded before jqueryui. It would be much better to use a shim config with a manual dependency.

T J Over a year ago

@WillemD'Haeseleer This answer clearly states "you need to make sure jQuery is loaded before jQuery UI" shim config is a way of doing that so technically there is nothing wrong with the answer.

T J Over a year ago

@WillemD'Haeseleer That's correct, for older versions. From 1.11.0 onwards shim is no longer required so now (I know your comment was old) the answer is ok. BTW it's not my answer. Those using old versions can make use of stackoverflow.com/a/17275596/2333214 for the shim config

|

T J · Accepted Answer · 2016-07-04 07:43:57Z

0

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.

edited Jul 4, 2016 at 7:43

T J

43.2k13 gold badges87 silver badges142 bronze badges

answered Apr 17, 2015 at 18:41

hendrixski

1,1541 gold badge12 silver badges20 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related