The Router component is a simple javascript class that provides an elegant routing system based on strings.
router.match('/zombie/edit/:id', function(params) {
console.log "You are trying to edit the zombie " + params.id
});bower install --save gotham-router
<!DOCTYPE html>
<html>
<head>
<title>Demo Router</title>
<!-- Include library -->
<script src="bower_components/router/dist/router.js"></script>
</head>
<body>
<script>
// We set the request, for example "/hello"
router = new Router("/hello");
router.match("/hello", function() {
console.log("hello world");
});
router.run();
if (router.passes()) {
// Display result of the routing
console.log(router.response());
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Demo Router</title>
<!-- Include library -->
<script src="bower_components/router/dist/router.js"></script>
</head>
<body>
<script>
// Set current browser request
router = new Router(window.location.pathname);
// Ex: http://gesjeremie.fr/
router.match("/", function() {
console.log("Index page");
});
// Ex: http://gesjeremie.fr/zombie/show/22
router.match("/zombie/show/22", function() {
console.log("Zombie #22")
});
router.run();
if (router.passes()) {
// Execute the callback
router.response().result();
}
</script>
</body>
</html>Of course you can add variables into your routes to be more flexible.
router.match("/zombie/show/:id", function(params) {
console.log("Edit zombie #" + params.id);
});In this example, an url like
http://localhost:3000/zombie/show/22orhttp://localhost:3000/zombie/show/smithwill match the pattern given
Sometimes you need to attach a constraint to a route. You can do that easily :
router.match("/search/zombie/:town", function() { ... }, function (params) {
if (params.town === 'new-york') {
return true;
}
return false;
});In this case, the route will match only if the town passed is
new-york, it's a little bit useless here, but we can imagine everything. The only thing to keep in mind the constraint function must returntrueorfalse.
####match(pattern, result, constraint)
router.match('/zombie/focus/:id', function(params) {
console.log(params.id);
});router.match('/zombie/focus/:id', 'you can put a string here than a function');// You can set an object too ...
router.match('/zombie/focus/:id', {});router.match('/zombie/:name', 'zombie#index', function(params) {
if (params.name === 'bieber') {
// Noop
return false;
}
return true;
});###run()
Loop all routes added via match() and try to find if a route ... match.
// Your routes here ...
// Run !
router.run();
// Now we can check if it's a success
if (router.passes()) {
// ...
}###passes()
If the router matched a route, it returns true else false
###fails()
If the router matched a route, it returns false else true
###response()
Return an empty object if failed else return an object like :
{
params: {id: 25},
result: function() {}
}In the root of the project, execute that :
coffee --compile --watch --output dist/ src/
Test are written with Qunit, just launch with your browser the file tests/index.html