骨干路由器实现不起作用

时间:2014-05-17 12:45:42

标签: backbone.js

以下是我的HTML文件 RouterExample.html 。我正在尝试创建一个路由器。但它没有用。

我有进口所有必需品吗?

当我尝试运行代码时,我按照设计获得了html页面。当我点击任何一个HREF对象时,该对象的名称将被附加到URL但是获取JBOSS,这是我的服务器主页。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script
    src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<script
    src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.1/backbone-min.js"></script>
<script src="scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="scripts/underscore.js" type="text/javascript"></script>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript" src="router.js"></script>
</head>
<body>

<a href="/#one">One</a>
<a href="/#two">Two</a>
<a href="/#three">Three</a>

<a href="/#block/one/1">One</a>
<a href="/#block/two/2">Two</a>
<a href="/#block/three/3">Three</a>

<table>
    <tr>
        <td id="one">1</td>
        <td id="two">2</td>
    </tr>
    <tr>
        <td id="three">3</td>
        <td id="four">4</td>
    </tr>
</table>

<script>
$(function(){
var AppRouter = Backbone.Router.extend({

    routes: {
    'RouterExample.html': 'home',
    'one' : 'oneFun'
    },

    home : function()
    {
    alert("Home");
    },
    oneFun: function()
    {
    alert("One Function");  
    }

    });
var fovView = new AppRouter();
Backbone.history.start();

});

</script>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

您的锚标记正在链接到另一个文档,因为href值以/开头。试试这个:

<a href="#one">One</a>
<a href="#two">Two</a>
<a href="#three">Three</a>

<a href="#block/one/1">One</a>
<a href="#block/two/2">Two</a>
<a href="#block/three/3">Three</a>