-
-
Save millermedeiros/1109742 to your computer and use it in GitHub Desktop.
| <!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> |
| 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 |
Many thanks for the above code. I set the code up and it was working fine. The back also works. But when I am clicking the refresh it is going back to 'home'. Can I know how to handle it? Thanks.
OK. I got it. I commented out following in "sample-hasher_crossroads.js".
/*
if(! hasher.getHash()){
hasher.setHash(DEFAULT_HASH);
*/
Thanks
I wanted to have something like following:
- When the base url is entered in browse or refreshed that should go to 'home' (default)
- 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
@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);
}
oh yeah, thank you, that's fine, how I dont see that, thank you for those works.