Skip to content

Use routes with parameters in javascript. Based on the onhashchange event.

Notifications You must be signed in to change notification settings

shubhamkumarnayak/jquery-routes

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jQuery routes - Routing in javascript

Setup

Include the jQuery library and the jquery.routes.js file.

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.routes.js"></script>

IE 9 and below

jQuery routes is now using toISOString function on the Date object. To enable it for older browsers add the toISOString polyfill found on MDN.

IE 7 and below

For legacy browser support, be sure to check out the jQuery.hashchange plugin by Ben Alman. Note that jQuery 1.9 and above is not supported by that plugin.

Usage

Link routes to javascript functions. Make sure the functions prepare the ui for this state of the application. Remember that you can go directly to a route without visiting the main route.

	var newsModule = {
		fetch: function() {
			$('#news').load('news.php?id=' + this.id).show();
		}
		fetchAll: function() {
			$('#news').load('news.php').show();
		}
	};

	$.routes.add('/news/{id:int}/', newsModule.fetch);
	$.routes.add('/news/', newsModule.fetchAll);

or anonymous functions

	$.routes.add('/news/{id:int}/', function() {
		$('#news').load('news.php?id=' + this.id).show();
	});

Parameters are defined with curly braces. The syntax is {name:datatype}. The datatype can be int, float, word, date or you can create your own. Datatypes are added in $.routes.datatypes and parsers in $.routes.parsers. The datatype for parameters can also be a regular expression, ex. {page:news|help|about}. The functions will get named parameters in "this", ex. this.page == 'news'.

Named routes

	// register the route
	$.routes.add('/news/{when:date}/', 'newsByDate', function() {
		alert('loading news from ' + this.when);
	});

	$('#get-news').click(function() {
		// change the url to this route (with this date as parameter)
		$.routes.find('newsByDate').routeTo({
			when: new Date(2010, 1, 19);
		});
	});

Use routeTo function to change the url or use execute function to only execute the function for that route.

Tests

Tests are written using QUnit. Open test/index.html to run the tests.

About

Use routes with parameters in javascript. Based on the onhashchange event.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 96.0%
  • HTML 4.0%