JS軽量クライアントサイドルーティングライブラリいろいろ

    class Router extends Kazitori
        beforeAnytime:["testBefore"]
        befores:
            '/<int:id>':['testShow']
        routes :
            '/':'index'
            '/<int:id>':'show'
            '/<string:username>/<int:id>':'post'

        index:()->
            # console.log "index"
            $('.currentPage').empty().append "this page is index"

        show:(id)->
            # console.log id
            $('.currentPage').empty().append "this page is test" + id

        post:(username, id)->
            $('.currentPage').empty().append username + "post " + id

        ###
            some before handlers
        ###
        testBefore:()->
            console.log "before!"
        testShow:()->
            console.log "before show"


    $(document).ready ()->
        window.App = new Router({root:'/'})

    page('/', index)
    page('/user/:user', show)
    page('/user/:user/edit', edit)
    page('/user/:user/album', album)
    page('/user/:id', user.load, user.show)
    page('/user/:id/edit', user.load, user.edit)
    page('/user/:name/:operation', callback)
    page('/user/:name/:operation?', callback)
    page('/user/*', loadUser)   
    page('/file/:file(*)', loadUser)
    page(/^\/commits\/(\d+)\.\.(\d+)/, loadUser)
    page('*', notfound)
    page()

    page(path, callback[, callback ...])

    // Basic usage
    crossroads.addRoute('/news/{id}', function(id){
      console.log(id);
    });
    crossroads.parse('/news/123'); //will match '/news/{id}' route passing 123 as param

    // Optional parameters
    crossroads.addRoute('/news/{id}/:date:', function(id, date){
      console.log(id +' - '+ date);
    });
    crossroads.parse('/news/123'); //match route and pass "123" as param
    crossroads.parse('/news/45/2011-09-31'); //match route passing "45" and "2011-09-31" as param

    // Rest segments
    // {section*} will match multiple segments
    crossroads.addRoute('/news/{section*}/{id}', function(section, id){
      console.log(section +' - '+ id);
    });
    //match route and pass "lorem" and "123"
    crossroads.parse('/news/lorem/123');
    //match route passing "lorem/ipsum/dolor" and "45"
    crossroads.parse('/news/lorem/ipsum/dolor/45'); 

    // Decode Query String
    crossroads.addRoute('foo.php{?query}', function(query){
      console.log(query.lorem +' - '+ query.dolor);
    });
    // match route passing {lorem:"ipsum", dolor:"amet"}
    crossroads.parse('foo.php?lorem=ipsum&dolor=amet');

    //capturing groups are passed as parameters to listeners
    crossroads.addRoute(/^news\/([0-9]+)$/, function(id){
    console.log(id);
    });
    crossroads.parse('/news/123'); //will match route passing "123" as param
    crossroads.parse('/news/qwerty'); //won't match route
    crossroads
        .addRoute('{section}', loadSection)
        .rules = {
            section : ['home', 'login', 'contact']
        };

    var app = Davis(function () {
      this.get('/welcome/:name', function (req) {
        $('body').append('<h1>Hello there, ' +  req.params['name'] + '!</h1>')
      })
    })

    $(document).ready(function () {
      // append a link to trigger the route
      $('body').append('<a href="/welcome/bob">Greet</a>');

      app.start();
    })

    function clearPanel(){
        // You can put some code in here to do fancy DOM transitions, such as fade-out or slide-in.
    }

    Path.map("#/users").to(function(){
        alert("Users!");
    });

    Path.map("#/comments").to(function(){
        alert("Comments!");
    }).enter(clearPanel);

    Path.map("#/posts").to(function(){
        alert("Posts!");
    }).enter(clearPanel);

    Path.root("#/posts");

    Path.listen();

    var hook = new Grapnel(':');

    hook.add('show', function(value){
        console.log('Showing: %s', this.value);
    });

    hook.on('match', function(value, action){
        console.log('Grapnel.js works! (Hook: "%s", Action: "%s", Value: "%s")', this.hook, action, value);
    });

    // Here is the most basic way:
    routie('users', function() {
        //this gets called when hash == #users
    });

    // If you want to define multiple routes you can pass in an object like this:
    routie({
        'users': function() {

        },
        'about': function() {
        }
    });

    // Routie also supports regex style routes, so you can do advanced routing like this:
    routie('users/:name', function(name) {
        //name == 'bob';
    });

    // Optional Params
    routie('users/:name?', function(name) {
        //name == undefined
        //then
        //name == bob
    });

    // Wildcard
    routie('users/*', function() {
    });

    // Catch All
    routie('*', function() {
    });

    // Named Routes
    routie('user users/:name', function() {});

    //Instanciate the router
    var router = new Router();

    //Define some routes with their respective callback function
    router.route('/posts/:id', function(id){ console.log(id)});
    router.route('/route/*path', function(path){ console.log(path)});
    router.route('', function(){ console.log("default route")});

    /* 
    * Navigate to route
    * the navigate method takes two extra arguments trigger and replace
    * trigger is by default true and replace is by default false
    */

    router.navigate('/posts/22');
    router.navigate('/posts/23', false); //ommit calling the callback
    router.navigate('/route/to/heaven', true, false); //just replace without history traceback

    //Navigate throught the History
    router.go(2); //forward navigation
    router.go(-3); //backward navigation