Develop Reference

What is wrong with my requirejs setup?

My requirejs config file looks correct to me. But when I get into my function to fire up my application, I only have access to jQuery. Could someone look at my config file and tell me what I am doing wrong? Why can't I see Backbone or Underscore and why can I see jQuery? Here is my config file:
require.config({
paths: {
jquery: "libs/jquery/jquery",
underscore: 'libs/underscore/underscore',
backbone: "libs/backbone/backbone"
},
shims: {
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
underscore: {
exports: '_'
}
}
});
require(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
'use strict';
debugger;
});
Thanks for the help.

I think you have shims instead of shim in singular, changing it should fix your issue.
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
}
}

The versions of underscore and backbone you are using are not AMD compliant, so they don't return in the way require.js needs them to. You can just leave them off of your function params and they will be available on the global scope. Otherwise, you are passing undefined into your function as the value of _ and Backbone.
require(['jquery', 'underscore', 'backbone'], function() {
console.log($);
console.log(_);
console.log(Backbone);
});

Backbone, RequireJS & Backbone-MVC, MVC = null

I'm using a combination of Backbone, RequireJS & Backbone-MVC (http://chance-an.github.io/backbone-mvc/#root/index).
But when I'm trying to use Backbone-MVC it returns a null.
Here's a list with all my javascript files
Main: http://pastebin.com/Pg0s73cH
App: http://pastebin.com/x4XFxPEG
Router: http://pastebin.com/0ADCn4SV
When I console log the MVC variable in Router it returns a null.
Can somebody find the problem?
Thanks!

you try with this code.
require.config({
paths: {
jquery: 'libs/jquery/jquery-min',
bootstrap: 'libs/bootstrap/bootstrap-min',
underscore: 'libs/underscore/underscore-min',
backbone: 'libs/backbone/backbone-min',
backbonemvc: 'libs/backbone/backbone-mvc',
templates: '../templates'
},
shim:{
'backbone': {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
'backbonemvc': {
deps: ["backbone"],
exports: "MVC"
}
}
});
The shim config can be wrong.

How to mixin Underscore plugins in RequireJS?

What is the right way to execute code on Underscore when it gets loaded? I am trying to execute the below code to extend the _ exported namespace automatically when modules require it:
_.mixin(_.str.exports());
The docs are a bit vague but I think I put it in the shim init section? I tried the below but I can't even get a breakpoint to hit in the init:
require.config({
paths: {
jquery: 'libs/jquery/jquery.min',
underscore: 'libs/underscore/lodash.min',
underscorestring: 'libs/underscore/underscore.string.min'
},
shim: {
underscore: {
exports: '_'
}
underscorestring: {
deps: ['underscore'],
init: function (_) {
//Mixin plugin to namespace
_.mixin(_.str.exports());
return _;
}
}
}
});
When I try to do this and use underscorestring, I get this error:
Uncaught TypeError: Object function s(e){return new o(e)} has no
method 'startsWith'
Docs:
http://requirejs.org/docs/api.html#config-shim
http://requirejs.org/docs/api.html#config-callback

I don't know if it's the correct way, but I got it working by inverting things so that underscore depends on underscore.string. Also, this way you don't have to require underscore.string.
require.config({
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
deps: ['underscore.string'],
exports: '_',
init: function(UnderscoreString) {
_.mixin(UnderscoreString);
}
}
},
paths: {
'backbone' : 'lib/backbone',
'jquery' : 'lib/jquery/jquery',
'text' : 'lib/require/text',
'underscore' : 'lib/underscore',
'underscore.string' : 'lib/underscore.string'
}
});
.
Update: 3/14/2014
Underscore.js v1.6.0 brought back AMD compatibility and init() has been removed from RequireJS, so some refactoring is in order. To continue getting Underscore preloaded with Underscore.string I made a mixer module to pull them together.
New Require.js config
requirejs.config({
paths: {
'backbone' : '../lib/backbone/backbone',
'backbone.base' : '../lib/backbone/backbone.base',
'backbone.extensions' : '../lib/backbone/backbone.extensions',
'jquery' : '../lib/jquery/jquery',
'text' : '../lib/require/text',
'underscore' : '../lib/underscore/underscore',
'underscore.mixed' : '../lib/underscore/underscore.mixed',
'underscore.string' : '../lib/underscore/underscore.string'
},
shim: {
'backbone.base': {
deps: ['underscore.mixed', 'jquery'],
exports: 'Backbone'
},
}
});
underscore.mixed
define([
'underscore',
'underscore.string'
], function(_, _s) {
_.mixin(_s.exports());
return _;
});
The final step is to replace all instances of 'underscore' with 'underscore.mixed' in module definitions. I attempted moving Underscore into a file named underscore.base.js and making the regular underscore the mixer (like the Backbone setup) to avoid this step. Underscore, being a named module, disagreed with the plan.

Do you require underscorestring somewhere? Because if it isn't required, it won't be loaded.
I managed to get it working with almost exactly the same code you posted:
require.config({
paths: {
underscore: [
'//raw.github.com/documentcloud/underscore/master/underscore-min'
, 'lib/underscore'
]
, underscorestring: 'https://raw.github.com/epeli/underscore.string/master/dist/underscore.string.min'
}
, shim: {
underscore: { exports: '_' },
underscorestring: {
deps: ['underscore'],
init: function(_) {
_.mixin(_.str.exports());
return _; // guess, this is not needed.
}
}
}
, exclude: ['underscore']
});
require(['underscore', 'underscorestring'], function(_) {
console.log( _.chars("i'm a happy string.") );
});

Battling with this for hours before i understand what i was doing wrong
This is what i did wrong
You should not rename the file underscore.string in main.js
even though in my library i did rename the file in paths i name it back to 'underscore.string'
This is how your main.js should look like
require.config({
paths: {
underscore: 'lib/underscore',
'underscore.string' : 'lib/_string' ,
},
shim: {
underscore: {
exports: '_',
deps: [ 'jquery', 'jqueryui' ]
},
'underscore.string': {
deps: [ 'underscore' ]
},
}
....
You could then either add it as dependency with in your shim like i did for my mixin file
shim: {
mixin : {
deps: [ 'jquery', 'underscore', 'underscore.string' , 'bootstrap' ]
},
Or just define it in your different pages like
/*global define */
define([
'underscore.string'
], function ( ) {
it just work now you can access it through _.str or _.string
This is why you should do it this way and not try to name it something else
on line 663 of underscore.string.js
// Register as a named module with AMD.
if (typeof define === 'function' && define.amd)
define('underscore.string', [], function(){ return _s; });
Which means that it will only register it with AMD require JS if you are defining 'underscore.string'
For Mix in you could just with define
/*global define */
define([
'underscore',
'underscore.string'
], function ( ) {
_.mixin(_.str.exports());

problems with backbone.js and require.js in iOS webviews

I'm having some strange issues with our application not executing javascript
I have a web view thats loaded in an iPad app.
the page renders using require and backbone but something prevents the external libraries to execute.
the issues are with both d3.js and a jquery countdown plugin.
using firebug I dont get any errors but the countdown isnt starting.
same with d3 drawing some things but click functionality isnt working
im not sure if its a require issue or an iOS6 issue.
if it was a require issue i assume we'd get errors. but we dont.
anyone have any clues to what might be the issue?
main controller looks like this
/*global require: false */
/*jslint nomen: true */
// Sets up common libraries for all pages
require.config({
paths: {
// Major libraries
'jquery': 'lib/jquery-1.8.2.min',
//'jquery.mobile': 'lib/jquery.mobile-1.2.0.min',
//'jquery.mobile-config': 'lib/jquery.mobile-config',
'underscore': 'lib/underscore-min',
'backbone': 'lib/backbone-min',
'fastclick': 'lib/fastclick.min',
'easing': 'lib/jquery.easing.1.3',
'countdown':'lib/jquery.countdown.min',
// Require.js plugins
'text': 'lib/text',
'socket.io': 'lib/socket.io.min'
},
shim: {
'jquery': {
exports: '$',
exports: 'jQuery'
},
'easing': ['jquery'],
//'jquery.mobile-config': ['jquery'],
//'jquery.mobile': ['jquery','jquery.mobile-config'],
'fastclick': {
exports: 'FastClick'
},
'countdown': {
deps: ['jquery'],
exports: 'countdown'
},
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'socket.io': {
exports: 'io'
}
}
});
require(['jquery', 'underscore', 'views/main-view', 'view-controller','fastclick', 'easing', 'countdown'], function ($, _, MainView, ViewController, fc, easing, countdown) {
"use strict";
var mainView = new MainView();
$("body").html(mainView.render().el);
ViewController.initialize();
});

Require.js Shim for loading JQuery UI and other JQuery Packages

I am trying to load JQuery-Ui with a shim, but JQueryUi keeps timing out when I try to load it even when I know the path is correct.
require.config({
paths: {
jQuery: 'libs/jquery-wrapper',
jQueryUi: 'libs/jquery-ui-min',
jQuerySelectmenu: 'libs/jquery.ui.selectmenu',
Underscore: 'libs/underscore-wrapper',
Backbone: 'libs/backbone-wrapper',
},
shim: {'Backbone': {
//These script dependencies should be loaded before loading
//backbone.js
deps: ['Underscore', 'jQuery'],
//Once loaded, use the global 'Backbone' as the
//module value.
exports: 'Backbone'
},
'jQueryUi': {
deps: ['jQuery'],
},
'jQuerySelectmenu': {
deps: ['jQuery', 'jQueryUi']
}
}
});
require([
'jQuery',
'Underscore',
'Backbone',
'jQueryUi',
'jQuerySelectmenu'
],
function(App) {
require(['order!src/app']
, function (App) {
App.initialize();
});
});

I think what damee is offering stands for older version of requireJs. Just folllow this tutorial as I did: Load jQuery UI with requireJS

Try to use this project https://github.com/jrburke/jqueryui-amd to translate your jqueryui to modularized version. Then you can simply use it:
define(['jquery', 'jqueryui/tabs'], function($){
$('#tabs').tabs();
});
With requirejs config:
requirejs.config({
paths: {
'jqueryui': '/javascript-cdn/jqueryui/' //output form jqueryui-amd
},
shim: {
'jquery': {
deps: [],
init: function(){
return $;
}
},
'jqueryui': {
deps: ['jquery']
}
}
});
I hope this helps.