Backbone routing problems

Question

I'm getting started with backbone, and have some trouble with the routing part. This is my simple page http://superduper.dk/

    // ABOUT MODEL

    var AboutModel = Backbone.Model.extend({
        urlRoot:'http://jsonplaceholder.typicode.com/posts',
    });

    var aboutModel = new AboutModel({

    });

    // ABOUT VIEW

    var AboutView = Backbone.View.extend({

        template: _.template('<h1><%= title %></h1> <p><%= body %></p>'),

        initialize: function() {
            this.listenTo(this.model, 'change', this.render);
        },

        render:function(){
            var attributes = this.model.toJSON();
            this.$el.html(this.template(attributes));
        }
    });

    // CASES MODEL

    var CasesModel = Backbone.Model.extend({
        urlRoot:'http://jsonplaceholder.typicode.com/posts',
    });

    var casesModel = new CasesModel({

    });

    // CASES VIEW

    var CasesView = Backbone.View.extend({

        template: _.template('<h1><%= title %></h1> <p><%= body %></p>'),

        initialize: function() {
            this.listenTo(this.model, 'change', this.render);
        },

        render:function(){
            var attributes = this.model.toJSON();
            this.$el.html(this.template(attributes));
        }
    });

    // ROUTER

    var Routes = new (Backbone.Router.extend({
        routes:{
            '' : 'index',
            'cases' : 'cases'
        },

        index:function(){
            console.log('about');
            var aboutView = new AboutView({model:aboutModel, el:'#view'});
            aboutModel.fetch(); 
        },

        cases:function(){
            console.log('cases');
            var casesView = new CasesView({model:casesModel, el:'#view'});
            casesModel.fetch();
        },

        start:function(){
            Backbone.history.start({pushState: true})
        }
    }));


    $(document).ready(function(){
        Routes.start();
    })

    $(document).on("click", "a", function(e)
    {

        var href = $(e.currentTarget).attr('href');

        var res = Backbone.history.navigate(href,true);
        //if we have an internal route don't call the server
        if(res)
            e.preventDefault();

    });

        <ul>
            <li><a href="/">About</a></li>    
            <li><a href="/cases">Cases</a></li>    
            <li><a href="http://www.contact.dk">Contact</a></li>    
        </ul>

        <div id="view"></div>

1. When the page loads you'll see the about view and then navigate to "Cases" and back to the "About" view – then the about view does not show again ...?

2. When I copy the link http://superduper.dk/cases and paste it in the browser, I get a "Page not found". Why does it not show the page ... it works when I navigate to it from the root url?

3. When I click the contact link on the page, it navigates to http://www.contact.dk but when I use the browsers back button it goes to http://superduper.dk/http://www.contact.dk and if I click one more time on the browsers back button, it shows a "Page not found"..?

Answer 1

Backbone router (and the navigation mechanisms of most of the SPA frameworks) works based on hash fragments, observing hashchange event. (unless you're using History API, which I think you're not)

If I enter http://superduper.dk/#cases, the view is correctly initialized.

You should update the hyperlinks to (Unless you're using History API, ofcourse)

<ul>
    <li><a href="#">About</a></li>    
    <li><a href="#cases">Cases</a></li>    
    <li><a href="http://www.contact.dk">Contact</a></li>    
</ul>