Awesome

Path JS

Simple routing library using HTML5 history.pushState or hashbang for web browsers.

Installation

$ component install pazguille/path

See: https://github.com/component/component

Standalone

Also, you can use the standalone version without components.

<script src="../standalone/path.js"></script>

How-to

First, initialize the router:

var path = require('path');

Now, define some listener for any paths:

function user(id) {
    console.log(id);
}

function userAction(id, action) {
    console.log(id);
    console.log(action);
}

Then, add some path to the router:

path('/user/:id', user);
path('/user/:id/:action', userAction);

You can also add to an object of path-listener:

path({
    '/user/:id': user,
    '/user/:id/:action': userAction
});

path('*', userAction);

path(userAction);

Somewhere in your HTML code, you should have anchor tags with #hash or #!/hash hyperlinks related to router js structure.

<a href="/user/pazguille" data-path>User</a>

API

path(path, listener)

Creates a new path and stores its listener into the collection.

path - The path you want to create.
listener - Listener you want to add to given path.

path('/user/:id', user);

path#remove(path, listener)

Removes a path or its litener from the collection with the given path. The listener is optional.

path - The path you want to remove.
listener [optional] - Listener you want to remove from given path.

path.remove('/user/:id', user);

path#getListeners(path)

Returns a collections of listeners with the given path. The path is optional. If not have a path as parameter it returns an entire collection of path-listeners.

path [optional]

path.getListeners('/user/:id'); // returns [user]

Contact

Guillermo Paz (Frontend developer - JavaScript developer | Web standards lover)
E-mail: guille87paz@gmail.com
Twitter: @pazguille
Web: http://pazguille.me