Skip to content

Instantly share code, notes, and snippets.

@millermedeiros

millermedeiros/sample-hasher_crossroads.html

Created July 27, 2011 16:28
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save millermedeiros/1109742 to your computer and use it in GitHub Desktop.
Save millermedeiros/1109742 to your computer and use it in GitHub Desktop.
Download ZIP
Using hasher together with crossroads.js
Raw
sample-hasher_crossroads.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>example crossroads + hasher</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<ul>
<li>
<a href="#/home">home</a>
</li>
<li>
<a href="#/lorem">lorem</a>
</li>
<li>
<a href="#/lorem/ipsum">lorem/ipsum</a>
</li>
</ul>
</div>
<!--
required scripts:
* js-signals (http://millermedeiros.github.com/js-signals/)
* crossroads.js (http://millermedeiros.github.com/crossroads.js/)
* hasher (https://github.com/millermedeiros/hasher/)
* sample (https://gist.github.com/1109742)
-->
<script src="signals.js"></script>
<script src="crossroads.js"></script>
<script src="hasher.js"></script>
<script src="sample-hasher_crossroads.js"></script>
</body>
</html>
Raw
sample-hasher_crossroads.js
var DEFAULT_HASH = 'home';
//setup crossroads
crossroads.addRoute('home');
crossroads.addRoute('lorem');
crossroads.addRoute('lorem/ipsum');
crossroads.routed.add(console.log, console); //log all routes
//setup hasher
//only required if you want to set a default value
if(! hasher.getHash()){
hasher.setHash(DEFAULT_HASH);
}
function parseHash(newHash, oldHash){
// second parameter of crossroads.parse() is the "defaultArguments" and should be an array
// so we ignore the "oldHash" argument to avoid issues.
crossroads.parse(newHash);
}
hasher.initialized.add(parseHash); //parse initial hash
hasher.changed.add(parseHash); //parse hash changes
hasher.init(); //start listening for hash changes
@amicns
Copy link

amicns commented Feb 16, 2013

I wanted to have something like following:

  1. When the base url is entered in browse or refreshed that should go to 'home' (default)
  2. But when clicked at other hashed like 'lorem' it should load 'lorem' not default

eg. base url = 'http://localhost:8080/index.html'
so when 'http://localhost:8080/index.html' is loaded it should go to 'http://localhost:8080/index.html#/home'
but when refreshed at 'http://localhost:8080/index.html#/lorem' then it should go to lorem ie. 'http://localhost:8080/index.html#/lorem'

I achieved the above with following (I haven't thought for other challenges for this thought)

var DEFAULT_HASH = 'home';
var url = 'http://localhost:8080/index.html';

//setup crossroads
crossroads.addRoute('home');
crossroads.addRoute('lorem');
crossroads.addRoute('lorem/ipsum');
crossroads.routed.add(console.log, console); //log all routes

//setup hasher

//only required if you want to set a default value

if(hasher.getURL() == url){
hasher.setHash(DEFAULT_HASH);
}

function parseHash(newHash, oldHash){
// second parameter of crossroads.parse() is the "defaultArguments" and should be an array
// so we ignore the "oldHash" argument to avoid issues.
crossroads.parse(newHash);
}
hasher.initialized.add(parseHash); //parse initial hash
hasher.changed.add(parseHash); //parse hash changes

hasher.init(); //start listening for hash changes

I haven't thought about how to make
var url = 'http://localhost:8080/index.html';
softcode instead of hardcode.

Thanks

@duhduhdan
Copy link

@amicns I know this was posted almost a year ago, but if anyone else is running into the same problem here's what I did:

var DEFAULT_HASH = 'home', url = hasher.getBaseURL();

if (hasher.getURL() === url) {
    hasher.setHash(DEFAULT_HASH);
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment