如何使用Crossroads JS？

Question

I am trying to figure out how to work with crossroads JS and kind of confused if I am on the right track. 我想弄清楚如何使用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>

When I try to navigate to /#foo , I don't see any output in the console. 当我尝试导航到/#foo ，在控制台中看不到任何输出。 Is this how it is supposed to work? 这是应该如何工作的吗？ I even created a JSFiddle . 我什至创建了一个JSFiddle 。

Answer 1

You have two problems in that snippet. 您在该代码段中有两个问题。

First, you are defining the route as /foo but in the anchor tag, you are calling #foo which is totally different. 首先，您将路由定义为/foo但在锚标记中，您调用的#foo完全不同。

Second, crossroads doesn't handle the calling of signals on its own. 其次，十字路口无法自行处理信号的调用。 You have to call crossroads.parse('/foo') in the onclick or on some other event to navigate to it. 您必须在onclick或其他事件中调用crossroads.parse('/foo')才能导航到它。 using an anchor tag like this directly won't work. 直接使用像这样的锚标记将不起作用。 You need to override the default behavior of anchor and call parse on the route. 您需要覆盖锚的默认行为，并在路由上调用解析。

Something like: 就像是：

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;
}

如何使用Crossroads JS？

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-09-15 12:23:05

如何使用Crossroads JS？

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-09-15 12:23:05

解决方案1
2 已采纳 2015-09-15 12:23:05