Backbone routing example using require.js

main.js

// This our standard require js bootstrap file.  It assumes you are using the
// require-jquery.js file that require.js provides
// Set the require.js configuration for the application
require.config({
	
	// Base path used to load scripts
	baseUrl: 'js/',
	
	// Prevent caching during dev
	urlArgs: "bust=" + (new Date()).getTime(),
	
	// Exclude these modules on build
	stubModules: ['text'],
	
	// Set common library paths
	paths: {
		jquery: 'empty:', // jquery is already loaded
		underscore: 'libs/underscore',
		backbone: 'libs/backbone'
	}
});

// Define the application entry point
define('main', function (require) {
	
	// Dependencies
	var $ = require('jquery'),
		router = require('router'); // This is the router.js file.  Note, it gets invoked before DOM is loaded

	// Auto go to a project detail page.  Trigger = true will tell it to run the callback
	// function from the router definition.
	router.navigate("project/some-slug", {trigger:true})
	
});

// Start the application
require(['main']);

router.js

define(function(require) {

	// Dependencies
	var $ = require('jquery'),
		Backbone = require('backbone');
		
	// Create router.  We're assuming you aren't doing anything nuts, thus a single router
	// for the whole site is suffient
	var router = Backbone.Router.extend({
		
		// Define routes
		routes: {
			"": "home",
			"projects": "projects",
			"project/:slug": "project",
		  },
		  
		// Handle those routes.  These callbacks get called when navigate is called with
		// trigger = true
		project: function(slug) { },
		projects: function() {},
		home: function() {} // The home page
	});
	
	// Listen for history changes
	Backbone.history.start({
		pushState: true,
		silent: true // This assumes that the server is handling the initial route and rendering your deep link
	});
	
	// Return the router for triggering links
	return router;

});

Hey weotch,

I think you should put

var router = new Router();

before calling navigate.

Nice gist btw. Good luck!

Thanks for the gist!

Hi,
in router.js, I had to change return router; to return new router(); to make it work

BTW: is the ':emtpy' a valid configuration? I didn't cache it on docs (requirejs).
Great idea though.