CODEWITHSUNDEEP
backbone.js
user1548065
user1548065

Reputation: 89

backbone router Implementation not working

Below is my HTML file RouterExample.html. I am trying to create a router. But it is not working.

Have i imported all necessaries?

When i try to run the code i get the html page as designed. When i click on any of the HREF objects, the object's name is getting appended to the URL but getting JBOSS, which is my server home page.

<!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>

Upvotes: 0

Views: 46

Answers (1)

Buck Doyle
Buck Doyle

Reputation: 6387

Your anchor tags are linking to another document because the href values start with /. Try this:

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

Upvotes: 1

Related Questions