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