10

I need a client-side routing solution to work with a chrome app. I've researched several and crossroads.js seems like a good fit. When I include it in my html file, it doesn't seem to work; that is, if I use code like 

crossroads.addRoute('/news/{id}', function(id){  
  alert(id);  
});   
crossroads.parse('/news/123');

, the page alerts '123' but if I type '/news/321' in the browser's url bar, it preforms the browser's default action, instead of alerting '321'. What am I doing wrong. (Also, I realize the title is broad, but I believe the difficulties I'm having with crossroads.js are more general than crossroads.js in particular. It is given as an example.)

laser
  • 1,388
  • 13
  • 14
danwoods
  • 4,889
  • 11
  • 62
  • 90
  • when you go to /news/123 does it navigate to a real page? or is it part of an anchor tag for ajax? – topherg Nov 21 '11 at 11:35
  • @cgoddard I'm using Chrome and it just does a google search for "/news/123" – danwoods Nov 22 '11 at 11:17
  • 1
    I am trying to figure out how to use crossroad for a few hours now and nothing seems to work. its webiste is just another poor documented site... so I think I have ditch testing. – Run Jan 03 '14 at 16:39

2 Answers2

8

Use Hasher (by the same author) also.

The documentation on the Crossroads page tells you that you need to use Hasher, (because that will be used for monitoring the widow.location bar.).

So you would also need to use Hasher, and initialise it, then you can add your "Crossroads" routes to Hasher to start monitoring for those particular routes.

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

//setup hasher
hasher.initialized.add(crossroads.parse, crossroads); //parse initial hash
hasher.changed.add(crossroads.parse, crossroads); //parse hash changes
hasher.init(); //start listening for history change

//update URL fragment generating new history record
hasher.setHash('lorem/ipsum');

http://millermedeiros.github.com/crossroads.js/

Layke
  • 51,422
  • 11
  • 85
  • 111
6

The command parse tells crossroads to have a look at the string and do an action based on it.

So in the case of crossroads.parse('/news/123'); it will always use /news/123.

Since you want crossroads to parse what you have in the browser address bar, you'll need to use that value in the parse method:

crossroads.parse(document.location.pathname);
ericosg
  • 4,926
  • 4
  • 37
  • 59
  • 4
    alternatively, to include your query string, `crossroads.parse(document.location.pathname + document.location.search)` – casey Nov 17 '13 at 10:22