BackboneJS and RequireJS configuration
One of the big challenges is getting backbonejs and requirejs working together without jumping through lots of hoops. After reading quite a few blog posts, stackoverflow answers I finally came up with a simple canonical solution to the problem.
The assumed directory layout is something like:
1static/
2 app/
3 config.js
4 main.js
5 vendor/
6 ...third party stuff like backbone, jquery, etc.etc.
Cutting to the chase here’s the configuration file I use
1// This is your: static/app/config.js file
2//
3require.config({
4 deps: ["main"],
5
6 paths: {
7 // Libraries
8 jquery: "../vendor/jquery",
9 underscore: "../vendor/underscore",
10 backbone: "../vendor/backbone",
11 handlebars: "../vendor/handlebars",
12 bootstrap: "../vendor/bootstrap"
13 },
14
15 shim: {
16 jquery: {
17 exports: '$'
18 },
19 underscore: {
20 exports: '_'
21 },
22 handlebars: {
23 exports: 'Handlebars'
24 },
25 backbone: {
26 deps: ['underscore', 'jquery'],
27 exports: 'Backbone'
28 }
29 }
30});
With that line in your HTML file and a configuration that is similar to what I've show you should be up and running, you can now create your main.js file that has the following simple format that you'll be extending shortly.
1// This is your: static/app/main.js file
2// - this is loaded as the deps: ["main"] in your configuration
3require([
4 // Libs
5 "jquery",
6 "underscore",
7 "backbone",
8],
9
10function ($, _, Backbone) {
11});