Crossroads with Hasher

by namlth

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-signals/1.0.0/js-signals.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hasher/1.2.0/hasher.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossroads/0.12.2/crossroads.min.js"></script>

JavaScript

//setup crossroads
crossroads.addRoute('foo');
crossroads.addRoute('lorem/ipsum');
//String rule with param:
//match '/news/123' passing "123" as param to handler
var route1 = crossroads.addRoute('/news/{id}', function(id){
  console.log(id);
});
 
//String rule with optional param:
//match '/foo/123/bar' passing "123" and "bar" as param
//match '/foo/45' passing 45 as param (slug is optional)
var route2 = crossroads.addRoute('/foo/{id}/:slug:');
//addRoute returns a Route object
route2.matched.add(console.log, console);
 
//RegExp rule:
//match '/lorem/ipsum' passing "ipsum" as param to handler
//note the capturing group around segment
var route3 = crossroads.addRoute(/^\/lorem\/([a-z]+)$/, function(id){
  console.log(id);
});
 
//String rule with rest segments:
//match '/foo/123/edit' passing "123" as argument
//match '/foo/45/asd/123/edit' passing "45/asd/123" as argument
var route4 = crossroads.addRoute('/foo/{id*}/edit');
//addRoute returns a Route object
route4.matched.add(console.log, console);
 
//Query String:
//match 'foo.php?lorem=ipsum&dolor=amet'
crossroads.addRoute('foo.php{?query}', function(query){
    // query strings are decoded into objects
    console.log('lorem '+ query.lorem +' dolor sit '+ query.dolor);
});


crossroads.routed.add(console.log, console); //log all routes
 
//setup hasher
function parseHash(newHash, oldHash){
	console.log(newHash);
  crossroads.parse(newHash);
}
hasher.initialized.add(parseHash); //parse initial hash
hasher.changed.add(parseHash); //parse hash changes
hasher.init(); //start listening for history change
 
//update URL fragment generating new history record
hasher.setHash('foo.php?lorem=ipsum&dolor=amet');