This project has moved. For the latest updates, please go here.

Using jHash Routes

What are Hash Routes?

Hash Routes one of the many techniques to more easily build Single Page Applications and operate on top of the "location.hash" JavaScript API.

Using Routes you can easily hook in to jHash to have certain code executed only when the "location.hash" is changed to a value that matches a pre-defined Route Pattern

What is a Route Pattern?

A jHash Route Pattern is defined in a very similar fashion to server-side routes using ASP.NET.

One thing to remember is that neither the Hash or the Route are passed to server-side code. They are solely used in the client-side web browser.

Routes are made up of two main pieces:
  • Route Pattern - a specific route value or a pattern to match using regular expressions
  • Callback / Handler - a function or method that is called when the "location.hash" is changed to a value that matches the associated Route Pattern

Building a Route Pattern

The core of jHash Route Patterns uses regular expressions to do the pattern matching and parsing. However, the jHash API completely abstracts out the need to know or use regular expressions when using Routes.

Static Route Patterns

You can create a route pattern that will only match one specific hash. To do this you just create the route with the specific value of the hash you are wanting to match.

Here are some example static Route Patterns and Hash values that would match them:

Route Pattern Matching Hash
List #List
Home #Home
Folder/23 #Folder/23

Dynamic Route Patterns

You can also create route patterns that will use a specific pattern to dynamically match many possible Hash values with that specific pattern. To do this you simply add a value to the Route Pattern that is surrounded by curly braces, like this {{folder}}.

Here are some example dynamic Route Patterns and Hash values that would match them:

Route Pattern Matching Hash
Item/4 #Item/4
Item/{id} #Item/1
Item/{id} #Item/2
Item/{id} #Item/3
{entity}/{id} #contact/1
{entity}/{id} #address/23
{entity}/{name} #State/Wisconsin


These dynamic parts of the routes can be named anything. The values of them can even be accessed within the associated Route Handler.

Adding Route Handlers

A Route Handler can be added using the "jHash.route" method once a Route Pattern has been defined.

Here's an example of adding a Route Pattern and its associated Route Handler:
jHash.route('{state}/{city}',
    function () {
        // add code here to handle route
    }
);

Accessing Route Parts from within a Route Handler

The Route Parts can be accessed by name (the one the are defined with) as properties of the "this" reference within the Route Handler.

Here's an example using the above Route Pattern:
// Hash that would match this Route Pattern
// #Wisconsin/Milwaukee

jHash.route('{state}/{city}',
    function () {
        var stateName = this.state;
        // stateName will equal 'Wisconsin'

        var cityName = this.city;
        // cityName will equal 'Milwaukee'
    }
);

Last edited May 4, 2012 at 2:01 PM by crpietschmann, version 5

Comments

niklavr Feb 13, 2014 at 8:45 AM 
andrewZa, try this:

var city = undefined;
// or another form using jHash:
jHash.val('city ', undefined);

andrewZa Oct 14, 2013 at 5:07 PM 
Question:
jHash.route('{state}/{city}/{street}',
function () {
/* do smth */
}
);

I try to do this:
var state = 'Wisconsin';
var city = '';
var str = 'Gorkogo st''
jHash.root(state + '/' + city + '/' + st);
// city is empty
// no route