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?

Answer 1

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.