如何使用Crossroads JS？

Question

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

Answer 1

您在該代碼段中有兩個問題。

首先，您將路由定義為/foo但在錨標記中，您調用的#foo完全不同。

其次，十字路口無法自行處理信號的調用。 您必須在onclick或其他事件中調用crossroads.parse('/foo')才能導航到它。 直接使用像這樣的錨標記將不起作用。 您需要覆蓋錨的默認行為，並在路由上調用解析。

就像是：

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