fractefactos/.htaccess

## .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,QSA]
</ifModule>

## app.js
/* 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();

})();

## index.html
<!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>
	# 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>