How to use crossroads.js with history.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {background:black;color:white;}
</style>
<script src="jquery.js"></script>
<script src="signal.js"></script>
<script src="history.js"></script>
<script src="history.adapter.js"></script>
<script src="routes.js"></script>
<script>
$(function(){
// Prepare
crossroads.addRoute('/test/{id}', function(id){
console.log(id,'888888888888888');
});
// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
var State = History.getState(); // Note: We are using History.getState() instead of event.state
console.log(State);
crossroads.parse(document.location.pathname + document.location.search);
});
$("body").on("click","a[data-href]",function(e){
e.preventDefault();
History.pushState({state:1}, "State 1", "/test/3");
});
});
</script>
</head>
<body>
hi
<a href="#">Test</a>
<a href="/test/two">Test2</a>
<a href="#" data-href="/test/three">Test3</a>
</body>
</html>