CODEWITHSUNDEEP
backbone.jsrequirejs
jcreamer898
jcreamer898

Reputation: 8189

Requirejs for Backbonejs application

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?

Upvotes: 1

Views: 1227

Answers (2)

Benjamin Dean
Benjamin Dean

Reputation: 1298

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();
        }
    });
});

Upvotes: 0

timDunham
timDunham

Reputation: 3318

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

Upvotes: 1

Related Questions