CODEWITHSUNDEEP
backbone.jsrequirejsamd
Pete_ch
Pete_ch

Reputation: 1321

requirejs with backbone compatibility

The setup below is the only way I can get backbone to ply nice with requirejs - is there a cleaner way? without having to specify the entire path to backbone everytime?

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html>
<html lang="en">
<head>
<title></title>
<link href='<c:url value="/resources/css/bootstrap.min.css"/>'
    rel="stylesheet" type="text/css" />
    <script data-main="resources/js/main.js" src="resources/js/lib/require.js"></script>

</head>
<body>
    <ul class="nav">
    <li ><a href="#home">Home</a></li>
    <li><a href="#rentals">Rentals</a>
    <li><a href="#films">Films</a></li>
</ul>
</body>
</html>

main.js

require.config({
    baseUrl : '/sakila/resources/js',
    paths : {
        jquery : 'lib/jquery-1.8.3.min',
        underscore : 'lib/underscore-min',
        jqueryui : 'lib/jquery-ui-1.9.2.custom.min'
    },
    shim : {
        '/sakila/resources/js/lib/backbone-min.js' : {
            deps : [ 'underscore', 'jquery' ],
            exports : 'Backbone'
        }
    }
});
require([ 'router' ], function(Router) {
    Router.initialize();
});

router.js

define(['underscore','jquery','/sakila/resources/js/lib/backbone-min.js'],function(_,$,Backbone){
    var AppRouter = Backbone.Router.extend({
        routes : {
            'home' : 'home',
            'films' : 'films',
            'rentals' : 'rentals',
            '*actions' : 'home', // default action
            '':'home'
        },
        home:function(){
            console.log('Routed to home');
        },
        films:function(){
            console.log('Routed to films');
        },
        rentals:function(){
            console.log('Routed to rentals');
        },

    });
    initialize = function() {
        var app_router = new AppRouter();
        Backbone.history.start();
        console.log('history started');
    };
    return {initialize:initialize};

});

Upvotes: 2

Views: 983

Answers (2)

Mike Barlow - BarDev
Mike Barlow - BarDev

Reputation: 11267

The following post describes how to use Require.js with Backbone.js. It covers 2 different ways of integrating Backbone.js with Require.js that includes shims and AMD compliant backbone.js.

Personally, I would rather use the AMD compliant version of Backbone.js and undescore.js. It makes the configuration a little cleaner and will load the modules in parallel. The folloing blog post describes this option.

Re-Learning Backbone.js – Require.js and AMD

Upvotes: 2

Erich Healy
Erich Healy

Reputation: 31

You can create an alias for Backbone in the paths of your requirejs configuration and use that alias in your shims. Also, you don't need to specify the full path for backbone as it respects the baseUrl option in your configuration.

require.config({
    baseUrl : '/sakila/resources/js',
    paths : {
        jquery : 'lib/jquery-1.8.3.min',
        underscore : 'lib/underscore-min',
        jqueryui : 'lib/jquery-ui-1.9.2.custom.min',
        backbone : 'lib/backbone-min'
    },
    shim : {
        backbone : {
            deps : [ 'underscore', 'jquery' ],
            exports : 'Backbone'
        }
    }
});

And then use it cleanly elsewhere.

define(['underscore','jquery','backbone'],function(_,$,Backbone){

})

Upvotes: 3

Related Questions