Develop Reference

What does requirejs.config() do?

I am having trouble understanding about requirejs.config() function.
requirejs.config({
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'knockout': '../lib/knockout/knockout-3.1.0',
'bootstrap': '../lib/bootstrap/js/bootstrap',
'jquery': '../lib/jquery/jquery-1.9.1'
},
shim: {
'bootstrap': {
deps: ['jquery'],
exports: 'jQuery'
}
}
});
What does the function do? Please do not direct me to the documentation because I have read it and still found it confusing. I need a simple explanation on what this function does.
Are these scripts loaded asynchronously?

It creates aliases for script paths ant tells how to interpret bootstrap (non-AMD script) when loaded. Nothing is loaded yet. You have to require:
// we load two dependencies here
// `knockout` and `bootstrap` are expanded to values in config
// .js added to values
// callback function called when all dependencies are loaded
require(['knockout', 'bootstap'], function(Knockout, $) {
// jQuery is passed to this function as a second parameter
// as defined in shim config exports
});

The path is like declarations/definitions. So for example,
jquery: '../bower_components/jquery/dist/jquery',
you can later load this lib as follows.
define([
'jquery'
], function (jquery) {
//initialize or do something with jquery
}
You don't have to specify the absolute path of the library.
In shim, you will define dependencies. So for example,
paths: {
template: '../templates',
text: '../bower_components/requirejs-text/text',
jquery: '../bower_components/jquery/dist/jquery',
backbone: '../bower_components/backbone/backbone',
underscore: '../bower_components/underscore/underscore',
Router: 'routes/router'
},
shim: {
'backbone': ['underscore', 'jquery'],
'App': ['backbone']
}
Here backbone is dependent on underscore and jquery. So those two libs will be loaded before backbone starts loading. Similarly App will be loaded after backbone is loaded.
You might find this repo useful if you are familiar with backbone and express.
https://github.com/sohel-rana/backbone-express-boilerplate

Fileupload is not working with RequireJS

I am having a problem when loading fileupload whilst using requirejs. The error that it gives me is:
TypeError: this._on is not a function
and I guess it is because fileupload requires jquery.ui.widget to be loaded too.
So I tried importing the lib, but I can't seem to make this right. Can anyone help me how to load it properly?
this is the code:
require.config({
paths: {
'jQuery': 'lib/jquery-1.10.2.min',
'jQuery-ui': 'lib/jquery-ui-1.10.3',
'jQuery-ui-widget' : 'jquery.ui.widget',
'bootstrap': 'lib/bootstrap.min',
'jquery-iframe': 'jquery.iframe-transport',
'fileupload': 'jquery.fileupload',
},
shim: {
'jQuery': {
exports: '$'
},
'jQuery-ui': {
deps: ['jQuery'],
exports: '$'
},
'jQuery-ui-widget': {
deps: ['jQuery', 'jQuery-ui-widget']
},
'bootstrap': {
deps: ['jQuery', 'jQuery-ui']
},
'fileupload': {
deps: ['jQuery', 'jQuery-ui', 'jquery-iframe']
}
},
// only for development purporses:
urlArgs: "bust=" + (new Date()).getTime()
});
require(['jQuery', 'jQuery-ui', 'bootstrap', 'layout', 'menu', 'modal', 'table', 'form', 'fileupload'], function ($, jqueryUi, _bootstrap, layout, menu, modal, table, form, fileupload) {
$(document).ready(function () {...

There are multiple problems with your configuration:
jQuery does not need a shim, and using a shim where none is needed can cause troubles.
jQuery hardcodes its module name as jquery (all lowercase) so you cannot refer to it under the name jQuery. Well, you could use a map config to map jQuery to jquery but you currently do not have such map in your configuration. I would recommend using jquery across the board, which is the current practice in just about every project I see that uses RequireJS and jQuery.
I also recommend using enforceDefine: true in your configuration so that RequireJS provides better diagnosis of module loading failures.

RequireJS doesn't always load modules

20% of the time, the scripts fail loading while using RequireJS.
The additional files that I am using throu the application require, besides the JS libraries, the base.js file, which contains configurations and some setup for underscore & backbone. Without these settings, the other files won't work.
The script tag in the is the following:
<script data-main="http://*path*/js/common" src="http://*path*/js/lib/require.js"></script>
The common.js file is
requirejs.config({
shim: {
underscore: {
exports: "_"
},
backbone: {
deps: ["jquery", "underscore"],
exports: "Backbone"
},
base: {
deps: ["backbone"]
}
},
paths: {
jquery: [
'//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min',
'http://*path*/media/admin/js/lib/jquery.min'
],
base: 'http://*path*/media/admin/js/base',
backbone: 'http://*path*/media/admin/js/lib/backbone',
underscore: 'http://*path*/media/admin/js/lib/underscore'
}
});
The base.js file, with the settings for backbone, underscore and jQuery, contains:
define(['jquery', 'backbone', 'underscore'], function(jQuery, Backbone, _) {
//CODE
return var;
});
And the other files contain
define(['base'], function(var) {
//CODE
});
In the page I am loading the files using:
require(['common'], function() {
require(['page/file'], function() {
//CODE
});
});
What am I doing wrong, why jQuery, underscore and backbone fail loading sometimes and how can I fix this?
The error message is:
GET http://*host*/backbone.js 404 (Not Found) require.js:1
Uncaught Error: Script error for: backbone
http://requirejs.org/docs/errors.html#scripterror

I don't know that this is the only problem but this shim should be removed:
base: {
deps: ["backbone"]
}
You've shown a base.js file that calls define. The rule is simple: if your module calls define, then you use define to set dependencies, and the return value of the function you pass to define to set the value of your module; if your module does not call define, then you need a shim to set dependencies and determine the value of the module (if needed).

RequireJS - custom js-library not working

I'm trying to include a custom js-library/script in my RequireJS-config but it doesnt seem to work. So I hope someone can help me out. I'm using RequireJS in combination with Backbone and Handlebars, so just to mention it...
In my Require config I have:
require.config({
paths: {
jquery: 'lib/jquery/jquery',
backbone: 'lib/backbone/backbone',
// Templating.
handlebars: 'lib/handlebars/handlebars',
// Plugins.
jqueryEffects: 'lib/jquery/jquery.effects',
... //some more libraries
},
shim: {
backbone: {
deps: ['jquery', 'lodash','jqueryEffects'],
exports: 'Backbone'
},
lodash: {
exports: '_'
},
handlebars: {
exports: 'Handlebars'
},
jqueryEffects : {
deps: ['jquery']
}
}
});
The jquery.effects.js is a simple script i created my own to handle special click events or run animations etc. When i start to run my backbone app, the console tells me that the script is loaded. So now on one of my Views, I have rendered a HTML file which contains an anchor with a class which serves as an identifier, which after clicking it should trigger something...BUT, nothing happens, so I tried to make an alert in the jquery.effects.js-file:
$(function() {
alert($(".videoname").lenght);
});
This gave me the response undefined. Does anyone maybe have an idea? The same goes when I add more libraries, console says they are loaded, but nothing happens... ?!?!?!??

try this (length not lenght) :
(function() {
alert($(".videoname").length);
})();
That's means that your script is working ;)

Problems getting Foundation 4 JS to work in WP

I'm merging Foundation 4 with Bones to create a WP Starter theme. I had everything working fine with the JS from Foundation 3, but now that I'm trying to implement the Foundation 4 JS I'm running into some issues.
I followed the steps found in the Foundation 4 JS Documentation, but still had no luck. Here is the code I placed directly before the closing body tag (I know the correct way is to enqueue the script, but for testing I was just pasting it directly above the closing body tag):
<script>
document.write('<script src=http://mcfaddengavender.net/jeremy/wp-content/themes/bones-master/library/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
<script src="http://mcfaddengavender.net/jeremy/wp-content/themes/bones-master/library/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
I'm attempting to open a modal on this page, but as you can see, the modal never fires when you click the link. I notice some errors in the Javascript console, but I'm still new to JS so they are a bit over my head.
As I mentioned before, things were working fine with the Foundation 3 JS, which didn't require the call to initialize the function - it just seemed to work. Not sure if that makes a huge difference, but it's something I noticed that was different about the documentation for Foundation 4 JS compared to Foundation 3 JS.
Can anyone get me pointed in the right direction?

It looks like the browser can't find Zepto (at least chrome can't).
It's looking for it here:
http://mcfaddengavender.net/library/js/vendor/zepto.js but it returns a 404
Make sure you have your libraries set up in the appropriate directories!

well after i commented, i got it to work lol. maybe this will help you or someone else.
it seems like the docs are a little bit confusing, i was only able to get plugin functionality from loading foundation/foundation.js and foundation-whatever-plugin.js in this sequence - loading just foundation.js did not work for me.
i'm using requirejs to load so i don't have to worry about paths, but for your purposes just make sure you're not having any paths issue and this load order should work. for troubleshooting purposes i'm bypassing modernizr / zepto detectors and just loading jquery straight.
requirejs.config({
baseUrl: "/path/to/scripts",
paths:{
jquery: 'vendor/jquery/jquery.min',
},
shim: {
'foundation/foundation': { deps: ['jquery'] },
'foundation/foundation.alerts': { deps: ['jquery'] },
'foundation/foundation.clearing': { deps: ['jquery'] },
'foundation/foundation.cookie': { deps: ['jquery'] },
'foundation/foundation.dropdown': { deps: ['jquery'] },
'foundation/foundation.forms': { deps: ['jquery'] },
'foundation/foundation.joyride': { deps: ['jquery'] },
'foundation/foundation.magellan': { deps: ['jquery'] },
'foundation/foundation.orbit': { deps: ['jquery'] },
'foundation/foundation.placeholder': { deps: ['jquery'] },
'foundation/foundation.reveal': { deps: ['jquery'] },
'foundation/foundation.section': { deps: ['jquery'] },
'foundation/foundation.tooltips': { deps: ['jquery'] },
'foundation/foundation.topbar': { deps: ['jquery'] },
'vendor/jquery.maskedinput/jquery.maskedinput.min': { deps: ['jquery']},
'vendor/chosen/chosen/chosen.jquery': { deps: ['jquery']},
'vendor/tablesorter/js/jquery.tablesorter.min': { deps: ['jquery']},
'vendor/tablesorter/addons/pager/jquery.tablesorter.pager.min': {
deps: [
'jquery',
'vendor/tablesorter/js/jquery.tablesorter.min'
]
},
'vendor/redactor-js/redactor/redactor.min': { deps: ['jquery']},
'lib/jquery.passwordstrength': { deps: ['jquery']}
}
});
require(["jquery",
"foundation/foundation",
"foundation/foundation.alerts",
"foundation/foundation.clearing",
"foundation/foundation.cookie",
"foundation/foundation.dropdown",
"foundation/foundation.forms",
"foundation/foundation.joyride",
"foundation/foundation.magellan",
"foundation/foundation.orbit",
"foundation/foundation.placeholder",
"foundation/foundation.reveal",
"foundation/foundation.section",
"foundation/foundation.tooltips",
"foundation/foundation.topbar"
], function ($) {
$(document).foundation();
});