2015-09-15 1 views
1

Я пытаюсь выяснить, как работать с перекрестками JS и смущать, если я нахожусь на правильном пути.Как пользоваться перекрестками JS?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Testing Cross Roads</title> 
</head> 
<body> 
    <a href="#foo">Testing link</a> 

    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> 
    <script type="text/javascript" src="bower_components/js-signals/dist/signals.min.js"></script> 
    <script type="text/javascript" src="bower_components/crossroads/dist/crossroads.min.js"></script> 

    <script type="text/javascript"> 
     var route1 = crossroads.addRoute('/foo', function(){ 
      console.log("Hello"); 
     }); 
    </script> 
</body> 
</html> 

Когда я пытаюсь перейти к /#foo, я не вижу никакого вывода в консоли. Так ли это должно работать? Я даже создал JSFiddle.

+0

ли 'addRoute ('/ Foo' ...' и '/ # Foo' должны соответствовать эти 2 адреса различны. –

ответ

2

У вас есть две проблемы в этом фрагменте.

Во-первых, вы определяете маршрут как /foo, но в теге привязки вы вызываете #foo, что совершенно другое.

Во-вторых, перекресток не обрабатывает вызов сигналов сам по себе. Вы должны позвонить crossroads.parse('/foo') в onclick или в другое событие, чтобы перейти к нему. использование тега привязки, подобного этому, напрямую не будет работать. Вам необходимо переопределить поведение по умолчанию для привязки и вызова на маршруте.

Что-то вроде:

var overrideDefaultAction = function (e) { 
    e.preventDefault(); 
    crossroads.parse('/' + this.href.split('/').pop()); 
} 

var a = document.querySelectorAll('a') 
for(i=0;i<a.length;i++){ 
    a[i].onclick = overrideDefaultAction; 
}