Skip to content

Instantly share code, notes, and snippets.

@andfinally
Last active June 18, 2024 08:44
Show Gist options
  • Save andfinally/8388113 to your computer and use it in GitHub Desktop.
Save andfinally/8388113 to your computer and use it in GitHub Desktop.
Barebones Backbone Router example for an Apache site with a local URL like http://local5/backbone-router.
# html5 pushstate (history) support:
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L,QSA]
</ifModule>
/* http://www.codebeerstartups.com/2013/01/routers-in-backbone-js-learning-backbone-js/
http://www.josscrowcroft.com/2012/code/htaccess-for-html5-history-pushstate-url-routing/
For Apache to send requests to index.html, where your router JS can then handle them, you need to have something like this in your .htaccess
# html5 pushstate (history) support:
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]
</ifModule>
1. Need rewrite rules in your .htaccess.
2. If you're not in root directory, may need base tag in your HTML file header.
3. Need to specify your app's base directory in your call to Backbone.history.start.
http://local5/backbone-router/ -- "Index route has been called.."
http://local5/backbone-router/show -- "Show route has been called.."
http://local5/backbone-router/help/news -- "Help route: page news"
http://local5/backbone-router/section/2/1 -- "Section route: section 2 part 1"
*/
(function(){
window.App = {
Models: {},
Collections: {},
Views: {},
Router: {}
};
App.Router = Backbone.Router.extend({
routes: {
"": "index",
"show(/)": "show",
"help(/:page)(/)": "help",
"section/:section(/)(:part)(/)": "section"
},
index: function(){
$(document.body).append("Index route has been called..");
},
show: function(){
$(document.body).append("Show route has been called..");
},
help: function(page){
$(document.body).append("Help route has been called: page " + page);
},
section: function(section, part){
$(document.body).append("Section route has been called: section " + section + " part " + part);
}
});
App.Views.ListView = Backbone.View.extend({
initialize: function(){
this.initializeRouter();
},
initializeRouter: function () {
this.router = new App.Router();
Backbone.history.start({ pushState: true, root: "/backbone-router/" });
}
})
var view = new App.Views.ListView();
})();
<!DOCTYPE HTML>
<html lang="en-gb">
<head>
<meta charset="UTF-8">
<!-- Need this to get around "Uncaught SyntaxError: Unexpected token <" errors when you request a multi-level url -->
<base href="http://local5/backbone-router/" />
<title></title>
<style>
a {
display: block;
}
</style>
</head>
<body>
<a href="show">Show</a>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="app.js"></script>
</html>
@RedShift1
Copy link

Works like a charm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment