javascript - Crossroadsjs routing: how to use it? - Stack Overflow

admin管理员组

文章数量:1026989

I am facing the same problem as this one as I am trying to figure out how to use crossroads for a few hours now and nothing seems to work. its webiste is just another poor documented site... I think I am probably daft! I wonder if anyone has made it?

html head,

<title>Crossroads</title>
  <script src="js/libs/signals.js"></script>
  <script src="js/libs/crossroads.min.js"></script>
  <script src="js/app.js"></script>
</head>

app.js, just as simple as this,

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

so I try it out on my localhost browser,

http://localhost/crossroadjs/#/news/123

nothing happens. I thought it would be 123??

I am facing the same problem as this one as I am trying to figure out how to use crossroads for a few hours now and nothing seems to work. its webiste is just another poor documented site... I think I am probably daft! I wonder if anyone has made it?

html head,

<title>Crossroads</title>
  <script src="js/libs/signals.js"></script>
  <script src="js/libs/crossroads.min.js"></script>
  <script src="js/app.js"></script>
</head>

app.js, just as simple as this,

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

so I try it out on my localhost browser,

http://localhost/crossroadjs/#/news/123

nothing happens. I thought it would be 123??

• javascript
• jquery
• node.js
• ember.js
• crossroadsjs

Share Improve this question Follow edited May 23, 2017 at 12:24 CommunityBot 111 silver badge asked Jan 3, 2014 at 16:45 RunRun 57.4k178178 gold badges464464 silver badges771771 bronze badges 1

• If you've checked examples for reference? github./millermedeiros/crossroads.js/wiki/Examples – moka Commented Jan 3, 2014 at 17:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Crossroads doesn't handle history/state change events from the browser. From their site:

A routes system shouldn't do anything else besides routing.

Instead, the site remends Hasher for this purpose and gives a rather plete looking example:

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

//setup hasher
function parseHash(newHash, oldHash){
  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('lorem/ipsum');

Alternatively you could use a different history plugin, or write something yourself. But crossroads leaves that part up to you.

Crossroads.js gives crossroads.addRoute(pattern, [handler], [priority]); API to add route patterns. However, when the first time you load the page Crossroads does not automatically initiate the parser to check against the url of the page. You need to add crossroads.parse(document.location.pathname); on you document load to trigger the route. Check out Crossroads.js Tutorial.

I am facing the same problem as this one as I am trying to figure out how to use crossroads for a few hours now and nothing seems to work. its webiste is just another poor documented site... I think I am probably daft! I wonder if anyone has made it?

html head,

<title>Crossroads</title>
  <script src="js/libs/signals.js"></script>
  <script src="js/libs/crossroads.min.js"></script>
  <script src="js/app.js"></script>
</head>

app.js, just as simple as this,

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

so I try it out on my localhost browser,

http://localhost/crossroadjs/#/news/123

nothing happens. I thought it would be 123??

I am facing the same problem as this one as I am trying to figure out how to use crossroads for a few hours now and nothing seems to work. its webiste is just another poor documented site... I think I am probably daft! I wonder if anyone has made it?

html head,

<title>Crossroads</title>
  <script src="js/libs/signals.js"></script>
  <script src="js/libs/crossroads.min.js"></script>
  <script src="js/app.js"></script>
</head>

app.js, just as simple as this,

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

so I try it out on my localhost browser,

http://localhost/crossroadjs/#/news/123

nothing happens. I thought it would be 123??

• javascript
• jquery
• node.js
• ember.js
• crossroadsjs

Share Improve this question Follow edited May 23, 2017 at 12:24 CommunityBot 111 silver badge asked Jan 3, 2014 at 16:45 RunRun 57.4k178178 gold badges464464 silver badges771771 bronze badges 1

• If you've checked examples for reference? github./millermedeiros/crossroads.js/wiki/Examples – moka Commented Jan 3, 2014 at 17:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Crossroads doesn't handle history/state change events from the browser. From their site:

A routes system shouldn't do anything else besides routing.

Instead, the site remends Hasher for this purpose and gives a rather plete looking example:

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

//setup hasher
function parseHash(newHash, oldHash){
  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('lorem/ipsum');

Alternatively you could use a different history plugin, or write something yourself. But crossroads leaves that part up to you.

Crossroads.js gives crossroads.addRoute(pattern, [handler], [priority]); API to add route patterns. However, when the first time you load the page Crossroads does not automatically initiate the parser to check against the url of the page. You need to add crossroads.parse(document.location.pathname); on you document load to trigger the route. Check out Crossroads.js Tutorial.

本文标签： javascriptCrossroadsjs routing how to use itStack Overflow