Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/miguelcastillo/hash.route.js
Simple and flexible routing system using location.hash
https://github.com/miguelcastillo/hash.route.js
Last synced: 9 days ago
JSON representation
Simple and flexible routing system using location.hash
- Host: GitHub
- URL: https://github.com/miguelcastillo/hash.route.js
- Owner: MiguelCastillo
- License: mit
- Created: 2013-11-13T00:29:47.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-01-22T19:46:02.000Z (almost 10 years ago)
- Last Synced: 2024-10-19T19:53:49.023Z (18 days ago)
- Language: JavaScript
- Homepage:
- Size: 277 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
hash.route.js, a simple and flexible routing system.
Setting up hash route listeners and different matching rules:
====
[](https://gitter.im/MiguelCastillo/hash.route.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
1) Empty match.
``` javascript
// Match empty route
hash("").on("change", function(evt) {
console.log(arguments);
});
```
2) Exact match.
Will match exact urls. E.g.
``` javascript
// home, will match
// /home/, will match. Notice the slashes don't affect pattern matching.
// home/sweet, will not match
hash("home").on("change", function(evt) {
console.log(arguments);
});
```
3) Exact match with slashes.
``` javascript
// home, will not match
// home/, will match.
// home/sweet, will not match
hash("home/").on("change", function(evt) {
console.log(arguments);
});
```
4) : parameter values.
Will match the url patterns, extracting and returning the parameter values. E.g.
``` javascript
// home/u21/age -> val1 = 21, val2 = age
hash("home/u:val1/:val2").on("change", function(evt, val1, val2) {
console.log(arguments);
});
```
5) *: optional parameter values.
Will match patterns returning whatever parameters are found. If a paramter isn't found, the match will be successful but the unmatched data is omitted. E.g.
``` javascript
// home -> val1 = "", val2 = ""
// home/umagic -> val1 = "magic", val2 = ""
// home/umagic/books -> val1 = "magic", val2 = "books"
hash("home/*u:val1/*:val2").on("change", function(evt) {
console.log(arguments);
});
```
6) **: whole parameter value.
Will return the entire matched paramater. E.g.
``` javascript
// home -> val1 = "", val2 = ""
// home/magic -> val1 = "magic"
// home/magic/books -> val1 = "magic/books"
hash("home/**:val1").on("change", function(evt, val1) {
console.log(arguments);
});
```
7) /** Wild card
Will match anything, and omit any wild card matched values.
``` javascript
hash("home/**").on("change", function(evt) {
console.log(arguments);
});
```
A more ellaborate wild card that has a starting exact match and returns the last parameter in the url.
``` javascript
// home/test -> val1 = test
// home/test/candy -> val1 = candy
// home/test/candy/coffee -> val1 = coffee
hash("home/**/:val1").on("change", function(evt) {
console.log(arguments);
});
```
What events are available?
====
Events that are triggered are:
enter which happens when a route pattern is matched for the firts time.
change which happens when an already matched route pattern changes to a different value that still matches the pattern.
leave which happens when a currently matched pattern changes to a value that no longer matches the route pattern. This is useful for coordinating house keeping.
How do events work?
====
When route listeners for enter and change are registered, logic for matching the route pattern is executed. If a match occurs, the newly resgistered enter or change handler will get an event of type init with the correspoding matching results. Any further changes that still match the pattern will trigger a change event. When a route transitions from matching to not matching, a leave event is triggered, which is generally a good spot to ungerister listeners and/or do any necessary clean up work.
Install
===============
``` shell
bower install hash.route
```
Or just get directly from git