1

我试图弄清楚如何使用 crossroads 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。

4

1 回答 1

2

您在该片段中有两个问题。

首先，您将路线定义为/foo但在锚标记中，您正在调用#foo它是完全不同的。

其次，crossroads 不自己处理信号的调用。您必须调用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;
}
于 2015-09-15T12:23:05.660 回答