Skip to content

Instantly share code, notes, and snippets.

@andrewpthorp

andrewpthorp/config.js

Created March 20, 2012 15:06
Show Gist options
  • Save andrewpthorp/2136676 to your computer and use it in GitHub Desktop.
Save andrewpthorp/2136676 to your computer and use it in GitHub Desktop.
Download ZIP
RequireJS Questions - Extracted from backbone-boilerplate
Raw
config.js
// Set the require.js configuration for your application.
require.config({
// Initialize the application with the main application file
deps: ["main"],
paths: {
// JavaScript folders
libs: "../assets/js/libs",
plugins: "../assets/js/plugins",
// Libraries
jquery: "../assets/js/libs/jquery",
underscore: "../assets/js/libs/underscore",
backbone: "../assets/js/libs/backbone",
// Plugins
jquerydosomething: "../assets/js/plugins/jquery.dosomething"
}
});
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Backbone Boilerplate</title>
<!-- Application styles -->
<link rel="stylesheet" href="/assets/css/index.css">
</head>
<body>
<!-- Main container -->
<div role="main" id="main"></div>
<!-- Application source -->
<script data-main="app/config" src="/assets/js/libs/require.js"></script>
</body>
</html>
Raw
jquery.dosomething.js
(function($){
$.fn.doSomething = function(){
$(this).html("Hello!");
}
}(jQuery));
Raw
main.js
require([
"namespace",
// Libs
"jquery",
// Modules
"modules/example",
// Plugins
"jquerydosomething"
],
function(namespace, $, Example) {
// Shorthand the application namespace
var app = namespace.app;
$(function() {
$("#main").doSomething();
});
});
@tbranyen
Copy link

  1. the libs path is a shortcut for any additional libs you may add. i figured it would be a nice shortcut. if you disagree, you can delete :-p

  2. the name for jquery needs to be jquery, because its a named AMD module. meaning you must use that name and nothing else.

@andrewpthorp
Copy link
Author

where is the jquery AMD module defined?

@tbranyen
Copy link

jquery.js - jquery is already amd compatible

@andrewpthorp
Copy link
Author

Oh I see that - it showed up in 1.7 in the bottom. Okay I get it now! :)

@andrewpthorp
Copy link
Author

@tbranyen, Would you mind looking at the new revision. For some reason, when I add this type of functionality, I get odd results.

Sometimes it works, sometimes I get the following errors:

  • ReferenceError: Can't find variable: jQuery in jquery.dosomething.js
  • TypeError: 'undefined' is not a function (evaluating '$("#main").doSomething()') in app/main.js

It almost appears like a race condition. What is the correct way to load jQuery plugins in an AMD situation? Keep in mind, most jQuery plugins out there are not AMD compliant, and I don't want to be responsible for updating their code.

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment