Requirejs for Backbonejs application

Question

I want to use Requirejs to run a Backbonejs application. Here is my basic setup.

root/
root/index.htm
root/scripts/
root/scripts/require-jquery.js
root/scripts/order.js
root/scripts/main.js
root/scripts/app.js
root/scripts/app.build.js
root/scripts/backbone.js

index.htm

<script data-main="scripts/main" src="scripts/require-jquery.js"></script>
<div id="home"></div>

main.js

require([
    "order!http://documentcloud.github.com/underscore/underscore.js",
    "order!backbone",
    "order!app"
    ],function(_,Backbone,app){
    app.init();
});

app.js

define(["jquery","underscore"],function($,_){
    var init = function(){
        var arr = ['orange','apple','bannana'];
        _.each(arr,function(fruit){
            console.log(fruit);
        });
    };

    return { init: init };
});

backbone.js

define(["order!http://documentcloud.github.com/backbone/backbone.js"], 
    function(){
        return Backbone;
});

I haven't gotten to the Backbone stuff yet because I am running into an error with this current setup...

Line 150: _ is undefined at _.extend(Backbone.Model.prototype, Backbone.Events, {

I am trying to make this thing as simple as possible and be able to eventually add my routers, models, etc...And build the thing down the road...

What am I missing here in my setup to get this thing rocking?

Also, would it be better in any way to use local js files instead of trying to load things from CDNs?

you might want to read and look through the sample code in this blog post: backbonetutorials.com/organizing-backbone-using-modules — Derick Bailey
– Derick Bailey, Commented Nov 7, 2011 at 18:12
Yea, I have definitely seen that...I noticed however that underscorejs , and jQuery as of 1.7 now support AMD. So I was hoping to try and put those to use. — jcreamer898
– jcreamer898, Commented Nov 7, 2011 at 18:25

Community · Accepted Answer · 2017-05-23 11:51:57Z

1

The following might be helpful:

Requirejs' order does not work with priority config and CDN dependencies

In short, require doesn't work perfectly with CDN assets and order.js--you have to nest your require calls (which kinda stinks).

Normally I've used local copies of backbone and underscore and they've worked well with the order! plugin

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Nov 8, 2011 at 4:37

timDunham

3,31825 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

In cases like this, where you have a known dependency heirarchy you may want to try using the shim functionality of requirejs. Since you know that backbone has dependencies for jQuery and Underscore, you shim backbone accordingly.

In the past here's how I've handled this situation (I've also included some example code on how to load your dependencies via CDN with a local fallback, you could use a bower directory as well if you choose). I would recommend making sure you're using requirejs to bundle your resources (saves time and improves performance):

main.js

requirejs.config({
    baseUrl: 'vendor',
    paths: {
        data:       '../data',
        tmpl:       './tmpl',
        views:      '../views',
        router:     '../router',
        jquery:     ['//yourCDNhere.tld/jquery/jquery.min', './jquery/jquery-2.0.0.min'],
        backbone:   ['//yourCDNhere.tld/backbone/backbone.min', './backbone/backbone.min'],
        etc...
    },
    deps: ['router'],
    shim: {
        'backbone': {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        'jquery': {
            exports: '$'
        },
        'underscore': {
            exports: '_'
        }
    }
});

require(['jquery', 'underscore', 'backbone', 'router'], function( $, _, Backbone, Router ) {
    var router = new Router();
    Backbone.history.start();
});

router.js

define( function( require ) {
    var Backbone = require( 'backbone' );
    var DashboardView = require( 'views/dashboard' );

    return Backbone.Router.extend({
        // Define some basic routes
        routes: {
            '': 'renderDashboard'
        },

        // Initialize the router
        initialize: function() {
            _.bindAll( this );
            
            return this;
        },

        renderDashboard: function(){
            var dashboardView = new DashboardView();
        }
    });
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 17, 2015 at 18:24

Benjamin Dean

1,32811 silver badges11 bronze badges

2 Comments

Louis Over a year ago

jQuery has not needed a shim in a long long time. I don't know when exactly Backbone lost the need for a shim but the version which was current when you posted your answer certainly did not. (See the [annotated code][(backbonejs.org/docs/backbone.html). It calls define.) Specifying a shim for modules that do not need them leads to undefined behavior. (That is, it is harmful.) I've just checked underscore's annotated source and note it calls define too. So no shim for it either.

Benjamin Dean Over a year ago

Thanks for sharing that with me @Louis I was unaware it would cause poor behavior. Do you have a URI for requirejs docs so I can modify my answer appropriately please?

Collectives™ on Stack Overflow

Requirejs for Backbonejs application

2 Answers 2

Comments

main.js

router.js

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

main.js

router.js

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related