-
-
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 |
@cherifGsoul the console.log call that was making the code to fail on Chrome (and the reason why it won't work on IE). On Chrome you need to call the console.log in the console context (I just added the second argument to the crossroads.routed.add() so now it will work on chrome). IE doesn't have a console (unless you have the dev tools opened) so it will fail.
Crossroads, Hasher and Signals should work on IE 6+ (only one that I'm not sure is crossroads since I only tested against IE 7-9).
oh yeah, thank you, that's fine, how I dont see that, thank you for those works.
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);
}
Thank you for this code, I want to say that this code works well in Firefox without errors, in chrome works but in the cosole I have an error " Uncaught TypeError: Illegal invocation" and the line "signals.js:107" and in IE-8 it dosent work at all.
Did you test it in chrome? Does crossroads, hasher and signals support IE? if yes what's the minimal version?
PS: Windows7 OSystem, with localhost server.