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?
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
}
});
Quite old post. There's a tool available to convert jquery ui files to AMD version, created by jrburke. Hope it would be useful!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With