We Keep Coding

RequireJS way of creating a copy of object

Our project is really huge, singe-page enterprise app, based on RequireJS and Backbone.js, and for some complex UI we use jqWidgets.
In particular, these jqWidgets are what is causing us problems.
There are many app features implemented using older jqWidgets 3.3, and for all new ones we would like to use 3.6, but porting old features to 3.6 is very tricky and will cost us time that we don't have at the moment.
What we would like to do to save this time, is having both 3.3 and 3.6 working alongside without creating any problems, and do the porting part later when we can.
What I have tried so far:
requirejs.config({
paths: {
"jquery": "vendor/jquery",
"jqx": "vendor/jqwidgets/3.3",
"jqx3.6": "vendor/jqwidgets/3.6",
... other libs...
},
shim: {
... other shims ...
// jqWidgets3.3
"jqx/jqxcore": {
deps: ["jquery"]
},
"jqx/<<some_plugin>>": {
deps: ["jqx/jqxcore"],
exports: "$.fn.<<some_plugin>>"
},
// jqWidgets3.6
"jqx3.6/jqxcore": {
deps: ["jquery"]
},
"jqx3.6/<<some_plugin>>": {
deps: ["jqx3.6/jqxcore"],
exports: "$.fn.<<some_plugin>>"
},
}
});
Usage in old feature:
require(["jquery", "jqx/<<some_plugin>>"], function($) {
$('<<some_selector>>').<<some_plugin>>(...options...);
});
Usage in new feature:
require(["jquery", "jqx3.6/<<some_plugin>>"], function($) {
$('<<some_selector>>').<<some_plugin>>(...options...);
});
Since both plugins are applied to same jQuery object referencing them with different names/paths works but creates lots of bugs. Example: if first feature you used in app was loaded using jqWidgets 3.3, then next used feature using 3.6 would probably broke, and vice-versa. It only works if you refresh the page after every feature use -- which is kind of pointless since it is single-page app.
So my question is: is it possible to make both jqWidgets 3.3 and 3.6 work alongside by each one of then depend on their own jQuery object so this conflict does not happen?
// Appendix 1:
I think potential solution lies in comment of this question: RequireJS - jQuery plugins with multiple jQuery versions
I'll take a closer look and post here a solution if I find one.

You can use 'map' feature of requirejs,
Map allows you to map the same dependency to different files based on the module which uses dependency.
so you config your build file like this:
requirejs.config({
paths: {
"jquery": "vendor/jquery",
"jqueryForjqx3.6": "toNoConflictJQueryModule",
"jqx": "vendor/jqwidgets/3.3",
"jqx3.6": "vendor/jqwidgets/3.6",
... other libs...
},
map:{
'*':{
.....
},
'jqx':{
'jquery' : 'jquery'
},
'jqx3.6':{
// map jquery to no conlict jquery
'jquery' : 'jqueryForjqx3.6'
},
'jqueryForjqx3.6':{
'jquery' : 'jquery'
}
},
shim: {
... other shims ...
// jqWidgets3.3
"jqx/jqxcore": {
deps: ["jquery"]
},
"jqx/<<some_plugin>>": {
deps: ["jqx/jqxcore"],
exports: "$.fn.<<some_plugin>>"
},
// jqWidgets3.6
"jqx3.6/jqxcore": {
deps: ["jquery"]
},
"jqx3.6/<<some_plugin>>": {
deps: ["jqx3.6/jqxcore"],
exports: "$.fn.<<some_plugin>>"
},
}
});
This configuration maps jquery dependency to different files based on module which uses it.
The content of no conflict version can be like this:
define(['jquery'], function($){
return $.noConflict();
});
You can use http://requirejs.org/docs/jquery.html#noconflictmap about how to use jquery no-conflict and requirejs

if jqWidgets doesn't support it out of the box, I'd try this:
load jQuery
load jqxWidget 3.3
load jQuery again, but in its noConflict mode, and assign it to $2 for instance (I'm not sure RequireJS can do that, but you could copy the jQuery.js file and rename it to something different to load it a second time)
set the 1st jQuery to $1 (window.$1 = $)
set the 2nd jQuery to $ (window.$ = $2)
load jqxWidget 3.6
Now each jqxWidget should have its own, separate jQuery.
Obviously it's not ideal to have jQuery loaded twice, but that shouldn't be a problem apart from using a bit more memory on your app.

Include jQuery UI with requireJS using noConflict jQuery

I'm working on a JavaScript module that uses jQuery, some functions of jQuery UI (draggable) and jPlayer. Recently I made myself familiar with requireJS to manage the dependencies properly.
I don't want to produce conflicts with a possibly already existing jQuery version that the site that includes my script uses. For this reason I am mapping the jQuery dependencies to a module "jquery-private" with a call of noConflict(), as is described in the requireJS guide.
As jQuery UI takes up a lot of space, I would also like to just include the modules that I am actually using. ui.draggable has the dependencies ui.core, ui.mouse and ui.widget, so I should have to include these 4 modules.
My problem is that I would like the jQuery UI modules and the jPlayer module to use my own version of jQuery, but obviously it isn't accessible by the global $ variable after I called the noConflict() method. Unfortunately neither jQuery UI nor jPlayer are AMD modules, so I needed to make shim configurations for them.
Here is my definition of the dependencies:
require.config({
baseUrl: 'javascript/modules',
paths: {
jquery: 'jquery-2.1.3',
jPlayer: 'jquery.jplayer',
uiCore: 'jquery.ui.core',
uiMouse: 'jquery.ui.mouse',
uiWidget: 'jquery.ui.widget',
uiDraggable: 'jquery.ui.draggable'
},
map: {
// '*' means all modules will get 'jquery-private'
// for their 'jquery' dependency.
'*': { 'jquery': 'jquery-private' },
// 'jquery-private' wants the real jQuery module
// though. If this line was not here, there would
// be an unresolvable cyclic dependency.
'jquery-private': { 'jquery': 'jquery' }
},
shim: {
jPlayer: {
deps: ['jquery']
},
uiCore: {
deps: ['jquery']
},
uiMouse: {
deps: ['jquery','uiCore']
},
uiWidget: {
deps: ['jquery','uiCore']
},
uiDraggable: {
deps: ['jquery','uiCore','uiMouse','uiWidget']
}
}
});
require(["json","jquery","jPlayer","uiDraggable"], function(json,___jQuery,jplayer,uiDraggable) {
(...)
}
Obviously this code produces errors as the $ variable in the jQuery UI modules is not defined.
Is there any way to pass my own jQuery object to modules? The top answer in another thread (How use require.js to load jQuery with noConflict) suggests that what I am trying to do is not possible, but maybe there is some other way to do it?
If there is none, I probably have to use global variables and heavily edit the included modules, which kind of makes it questionnable why to use a dependency management library like requireJS in the first place...

I found the following code on top of each module in jquery.ui:
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([ "jquery" ], factory );
} else {
// Browser globals
factory( jQuery );
}
}(function( $ ) {...});
And it means jquery.ui checks when global AMD "define" function is defined and uses 'jquery' as AMD reference for module.
It will use no conflict of jquery based on requirejs recommendation in this and this.
And about how to use jQuery with AMD.

How can I work around Handlebars.js lack of a noConflict method?

I'm creating a web application using Backbone.js and Handlebars.js (with Underscore.js and jQuery as dependencies for Backbone). I'm loading modules for the app with requirejs.
Following the instructions here:
http://requirejs.org/docs/jquery.html#noconflictmap
and here:
http://requirejs.org/docs/api.html#config
So my requirejs config looks like:
map: {
'*' : { 'jquery': 'jquery-private' },
'jquery-private': { 'jquery': 'jquery' }
},
shim: {
'underscore' : {
exports: '_',
init: function() { return this._.noConflict(); }
},
'backbone' : {
deps: ['underscore', 'jquery'],
exports: 'Backbone',
init: function(_, $) {
// need to manually set Backbone.$ since it looks for it on the global object
this.Backbone.$ = $;
return this.Backbone.noConflict();
}
},
'handlebars' : { exports: 'Handlebars' }
}
I'm loading local copies of my dependencies by calling noConflict() on backbone, underscore, and jquery. However, Handlebars does not have a noConflict method; if I attempt to configure the shim for it in the same way as backbone & underscore, I get an error:
Uncaught TypeError: Object #<c> has no method 'noConflict'
No real surprise there, but then I'm concerned about conflicts! Is there a workaround? Can I somehow manually achieve the same goal by writing my own version of the noConflict for Handlebars? What would that look like?

As I understand, purpose of noConflict is to release some namespace (or, in other words, global variable). I think, you could accomplish it in following way:
Add to Handlebars some fake dependency (it may be simple AMD module,
written by yourself)
in Handlebars shim config, use init option in following way:
handlebars : {
deps: ['myFakeModule'],
init: function(myFakeModule) {
myFakeModule.Handlebars = this.Handlebars;
this.Handlebars = undefined;
return myFakeModule.Handlebars;
}
}
This is a theory and a bit hacky, but it might do the trick.

if a requireJS module sets a global on $, how do I execute the module code only when the global has been assigned?

I'm trying to load jqplot as a requireJS module.
My main.js has a path and shim like this:
require.config({
, paths: {
plot: '../js/plugins/jqplot/jqplot.module'
}
, shim: {
'plot': { deps: ['jquery']}
}
});
Since this module is not needed on most pages, I'm waiting for the pageXYZ to be loaded and then inside a <script></script>, I'm calling:
require(['plot'],
function (plot) {
// do stuff
}
);
And my jqplot.module looks like this:
define(['../js/plugins/jqplot/jquery.jqplot'],
function () {
require([
'../js/plugins/jqplot/plugins/jqplot.barRenderer'
, '../js/plugins/jqplot/plugins/jqplot.logAxisRenderer'
, '../js/plugins/jqplot/plugins/jqplot.categoryAxisRenderer'
, '../js/plugins/jqplot/plugins/jqplot.canvasAxisTickRenderer'
, '../js/plugins/jqplot/plugins/jqplot.canvasTextRenderer'
, '../js/plugins/jqplot/plugins/jqplot.pointLabels'
, '../js/plugins/jqplot/plugins/jqplot.enhancedLegendRenderer'
],
function (){
return $.jqplot;
}
);
}
);
which returns the correct object with all sub-plugins defined and usable.
However, my Do stuff code runs BEFORE jqplot is assigned to $, so I'm still getting undefined errors when my code runs (I assume, because the files are all loaded, so requirejs starts running)
Question:
What can I do halt code execution until the jqplot has been assigned to $?

1) I think this line from your question:
define(['../js/plugins/jqplot/jquery.jqplot'],
should read:
define(['../js/plugins/jqplot/jquery.module'],
2) You do not need a shim, because you have a module definition that loads jqplot. So change your requirejs.config to
require.config({
, paths: {
plot: '../js/plugins/jqplot/jqplot.module'
}
});
3) your jqplot.module is not returning anything right now. Change it to:
define([
'../js/plugins/jqplot/jquery.jqplot'
],
function () {
var plot;
require([
'../js/plugins/jqplot/plugins/jqplot.barRenderer',
'../js/plugins/jqplot/plugins/jqplot.logAxisRenderer',
'../js/plugins/jqplot/plugins/jqplot.categoryAxisRenderer',
'../js/plugins/jqplot/plugins/jqplot.canvasAxisTickRenderer',
'../js/plugins/jqplot/plugins/jqplot.canvasTextRenderer',
'../js/plugins/jqplot/plugins/jqplot.pointLabels',
'../js/plugins/jqplot/plugins/jqplot.enhancedLegendRenderer'
],
function () {
plot = $.jqplot;
});
return plot;
});
This is all untested, but I think these should help

Answering this question and all the repeats, basic above answer is close but no cigar, as require is async, as such require could/will fire before define closure closes and returns, async safe solution below :
Nasty problem, as it's a chain of three dependencies
jquery is required for jqplot which is required for jqplot plugins, I have a simpler solution based on the same lines as the one above
first do your requirejs "main.js" config like so
requirejs.config({
paths: {
"jquery": "path/to/jquery-1.10.2.min",
// WORKAROUND : jQuery plugins + shims
"jqplot.core": "path/to/jquery-jqplot-1.0.8.min",
"jqplot": "jquery-jqplot-module-with-plugins-1.0.8"
},
shim: {
"jqplot.core": {deps: ["jquery"]},
"jqplot": {deps: ["jqplot.core"]}
}
});
create a wrapper file module file called "jquery-jqplot-module-with-plugins-1.0.8.js", containing :
// wraps jquery jqplot plugin in define statement
define([
"jquery",
"path/to/jqplot.highlighter.min",
"path/to/jqplot.cursor.min",
"path/to/jqplot.dateAxisRenderer.min",
"path/to/jqplot.canvasTextRenderer.min",
"path/to/jqplot.canvasAxisLabelRenderer.min",
"path/to/jqplot.enhancedLegendRenderer.min",
"path/to/jqplot.pieRenderer.min",
"path/to/jqplot.donutRenderer.min",
], function($) {
var jqplot;
jqplot = $.jqplot;
return jqplot;
});
Then when ever you need jqplot with those plugins, simply call for "jqplot" which will load "jquery" then "jqplot.core" then all the jqplot modules, then finally return the jqplot object :)
require(["jquery", "jqplot"], function ($, $jqplot) {
console.log("Success..Inside Require JS");
console.log("Plot...", $.jqplot, $jqplot);
});
or
define(["jquery", "jqplot"], function ($, $jqplot) {
console.log("Success..Inside Define JS");
console.log("Plot...", $.jqplot, $jqplot);
});
tada! :)
ps jquery plugins are evil, no suggestion how to fix that situation, just a statement of fact
cheers
Ant

Implementing AMD in JavaScript using RequireJS

I am totally new to RequireJS so I'm still trying to find my way around it. I had a project that was working perfectly fine, then I decided to use RequireJS so I messed it up :)
With that out of the way, I have a few questions about RequireJS and how it figures out everything. I have the file hierarchy inside the scripts folder:
I have the following line inside my _Layout.cshtml file:
<script data-main="#Url.Content("~/Scripts/bootstrap.js")" src="#Url.Content("~/Scripts/require-2.0.6.js")" type="text/javascript"></script>
And here's my bootstrap.js file:
require.config({
shim: {
'jQuery': {
exports: 'jQuery'
},
'Knockout': {
exports: 'ko'
},
'Sammy': {
exports: 'Sammy'
},
'MD': {
exports: 'MD'
}
},
paths: {
'jQuery': 'jquery-1.8.1.min.js',
'Knockout': 'knockout-2.1.0.js',
'Sammy': 'sammy/sammy.js',
'MD': 'metro/md.core.js',
'pubsub': 'utils/jquery.pubsub.js',
'waitHandle': 'utils/bsynchro.jquery.utils.js',
'viewModelBase': 'app/metro.core.js',
'bindingHandlers': 'app/bindingHandlers.js',
'groupingViewModel': 'app/grouping-page.js',
'pagingViewModel': 'app/paging-page.js'
}
});
require(['viewModelBase', 'bindingHandlers', 'Knockout', 'jQuery', 'waitHandle', 'MD'], function (ViewModelBase, BindingHandlers, ko, $, waitHandle, MD) {
BindingHandlers.init();
$(window).resize(function () {
waitHandle.waitForFinalEvent(function () {
MD.UI.recalculateAll();
}, 500, "WINDOW_RESIZING");
});
var viewModelBase = Object.create(ViewModelBase);
ko.applyBindings(viewModelBase);
viewModelBase.initialize();
});
require(['viewModelBase', 'bindingHandlers', 'Knockout'], function (ViewModelBase, BindingHandlers, ko) {
BindingHandlers.init();
var viewModelBase = new ViewModelBase();
ko.applyBindings(viewModelBase);
viewModelBase.initialize();
});
Then I implemented my modules by using the define function. An example is the pubsub module:
define(['jQuery'], function ($) {
var
publish = function(eventName) {
//implementation
},
subscribe = function(eventName, fn) {
//implementation
}
return {
publish: publish,
subscribe: subscribe
}
});
I've basically done the same thing to all of my javascript files. Note that the actual file containing the pubsub module is jquery.pubsub.js inside the /Scripts/utils folder. This is also the case with other modules as well.
UPDATE:
Ok I updated my bootstrap file now that I think I understand what a shim is and why I should be using it. But it's still not working for me, although I've also declared all the paths that I think would've caused me trouble in getting them right. The thing is that it's not even going into my require callback inside the bootstrap file, so I guess I still have a problem in the way I'm configuring or defining my modules?

Well, for one, if you are going to use a non-amd library, say jQuery, with require and have the jQuery function passed to the callback, you need to specify a shim with exports in your require config, like so:
require.config({
shim: {
jQuery: {
exports: '$'
}
},
paths: {
jQuery: 'jquery-1.8.1.min.js',
}
});
Other than that I'm not sure I understand what your issue is exactly.

If you are using ASP.NET MVC take a look at RequireJS for .NET
The RequireJS for .NET project smoothly integrates the RequireJS framework with ASP.NET MVC on the server side using xml configuration files, action filter attributes, a base controller for inheritance and helper classes.

I did not completely understand what the problem is. But if it relates to JS libraries to be loaded with require.js then this boot file works for me:
require.config({
paths: {
"jquery": "/scripts/jquery-1.8.2",
"sammy": "/scripts/sammy-0.7.1"
},
shim: {
"sammy": {
deps: ["jquery"],
exports: "Sammy"
}
}
});
require(["jquery", "sammy"], function ($) {
$(document).ready(function () {
alert("DOM ready");
});
});
Please, note, there is no '.js' in paths.
BTW, if you use MVC 4, you don't need #Url.Content in 'href' and 'src' any more.