-
-
Save andrewpthorp/2136676 to your computer and use it in GitHub Desktop.
| // 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" | |
| } | |
| }); |
| <!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> |
| (function($){ | |
| $.fn.doSomething = function(){ | |
| $(this).html("Hello!"); | |
| } | |
| }(jQuery)); |
| require([ | |
| "namespace", | |
| // Libs | |
| "jquery", | |
| // Modules | |
| "modules/example", | |
| // Plugins | |
| "jquerydosomething" | |
| ], | |
| function(namespace, $, Example) { | |
| // Shorthand the application namespace | |
| var app = namespace.app; | |
| $(function() { | |
| $("#main").doSomething(); | |
| }); | |
| }); |
-
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
-
the name for jquery needs to be jquery, because its a named AMD module. meaning you must use that name and nothing else.
where is the jquery AMD module defined?
jquery.js - jquery is already amd compatible
Oh I see that - it showed up in 1.7 in the bottom. Okay I get it now! :)
@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!
I am using the backbone-boilerplate, which you can find on github. I have extracted some questions from it with a newer setup using requirejs.
If anyone could answer the following questions, I would be greatly appreciative!
config.js What is the point of having
libsas a path, if you specifyjquery,underscore, andbackboneseparately? I'm not sure what the libs/plugins paths do for you.main.js The require 'namespace' is referencing namespace.js, in the same directory (or whatever else is set up as the baseUrl). However, if I change jquery to jqueries (in the config and in the main) - I get an error. I thought that require 'jquery' was looking at the path? Why does the name have to be
jquery?I have more questions, but these two will definitely get me headed in the right direction.
(Just because I know this will come up. I have read through the requireJS documentation and jumped into the code itself, but am having a difficult time understanding some of these concepts.)
Cheers!