StateRouter.js
Description
StateRouter.js is a small JavaScript library intended to extend the History.js HTML5 history library with routing capabilities.
Why
I wasn't able to find any routing libraries for History.js that I was quite happy with, so I decided I might as well write my own. An important benefit of doing it myself is that I can ensure good test coverage. The tests are written BDD style, with the help of the excellent Jasmine framework.
Requirements
StateRouter.js requires just the History.js library.
Installation
Download lib/staterouter.js and include it in your page after History.js.
Usage
function getHome() {
}
function getPersons() {
}
function getPerson(id) {
// Browser state is accessible as the this variable
if (/^.+?\?alert=true$/.test(this.url)) {
alert("What: " + this.data.what + "\nTitle: " + this.title + "\nURL: " + this.url);
}
}
var router = new staterouter.Router();
// Configure routes
router
.route('/', getHome)
.route('/persons', getPersons)
.route('/persons/:id', getPerson);
$(document).ready(function () {
// Perform initial routing
router.perform();
// Navigate to a URL, also specifying the page's data and title
router.navigate('/persons/1');
// Go back
router.back();
// Go forward
router.go(1);
// Navigate to a URL, also specifying the page's data and title
router.navigate('/persons/1?alert=true', {what: 'State'}, 'Person');
});
Testing
StateRouter.js is tested through Jasmine specifications, contained in 'spec/StateRouter.js'. In order to run them, open 'specrunner.html' in a browser.