Backbone Router navigate keeps long history

Question

I am building an application with Backbone and to go from step 1 to step 2 I make use the of the router.navigate function. Now it will go to the next page and go back etc.

However every step I take will be kept in the history and every page in the history will be visited after each event. This will also show up in the console log.

Now I am using require.js as well

Here is my router:

var OF = OF || {};
OF.SubscribeRouter = Backbone.Router.extend({

    routes: {       
        "step/:stepNumber": "goToStep",
        "*other": "defaultRoute"
    },

    goToStep: function(stepNumber) {

        switch(stepNumber) {
            case "1":
                require(['./views/step1],function(Step1) {
                    OF.step1 = new OF.Step1;
                    OF.step1.render();
                });
                break;

            case "2":
                require(['./views/step2'],function(Step2) {
                    OF.step2 = new OF.Step2;
                    OF.step2.render();
                });
                break;

            case "3":
                require(['./views/step3'],function(Step3) {

                    OF.step3 = new OF.Step3;
                    OF.step3.render();
                });
                break;

            case "4":
                require(['./views/step4'],function(Step4) {

                    OF.step4 = new OF.Step4;
                    OF.step4.render();

                });
                break;

            case "5":
                require(['./views/step5'],function(Step5) {

                    OF.step5 = new OF.Step5;
                    OF.step5.render();

                });
                break;

            case "6":
                require(['./views/step6'],function(Step6) {

                    OF.step6 = new OF.Step6;
                    OF.step6.render();

                });
            break;
        }

    },

    defaultRoute: function(other) {
        //start loading the welcome page
        this.goToStep(1);

    }

});

Here is my main file which will start the router:

var OF = OF || {};

require.config({
    paths: {
        underscore: 'vendor/underscore-min',
        jquery: 'vendor/jquery-2.0.3',
        json2: 'vendor/json2',
        backbone: 'vendor/backbone-min',
        handlebars: 'vendor/handlebars',
        router: 'routers/router'
    },
    shim: {
        'backbone': {
            deps: ['underscore', 'jquery', 'json2'],
            exports: 'backbone'
        },
        'handlebars': {
            deps: ['jquery', 'json2'],
            exports: 'handlebars'
        },
        'templateReader': {
            deps: ['jquery', 'json2', 'handlebars'],
            exports: 'templateReader'
        },
            'router': {
            deps: ['jquery', 'json2', 'backbone'],
            exports: ''
        }
    }
});

require(['router'], function(SubscribeRouter) {

    // create the application
    'use strict';

    OF = {       
        router: new OF.SubscribeRouter(),
    };

    //start router
    Backbone.history.start();

});

And here is the view which will trigger the event for 'page change':

var OF = OF || {};
OF.Step1 = Backbone.View.extend({

    el: '#content',

    initialize: function() {

        console.log("you're in the address view");

    },

    render: function() {

        //save this in that ;)
        var that = this;

        OF.template.get('step1-step1', function(data) {

            //set the source en precompile the template
            var htmlSource = $(data).html();
            var template = Handlebars.compile(htmlSource);

            //fill template with object or ''
            var compiled = template(OF);

            //now place the completely compiled html into the page
            that.$el.html(compiled);

        });

    },

    events: {

        "click #next": "nextStep"

    },

    nextStep: function() {

        OF.router.navigate('step/2', {trigger: true});

    }

});

So this is what I see in my console log after clicking next:

• GET template-step2.html

now going back:

• GET template-step1.html

So all seems well right now. However now that I am back on step1 and click on next I expect to go to step2. Unfortunately I will go to step3 and this is what I see in my console log:

• GET template-step2.html
• GET template-step2.html
• GET template-step3.html

Is there a way to clear this history of some kind or to prevent this from caching or whatever it is it does?

where can I find a list of options for the router.navigate method?

Answer 1

I found the reason for this 'error' and it is because I use the same ID for the buttons in every template. When I changed this, the problem was solved.

Though I am still figuring out if the cache cannot be cleared so I can still use the same ID's (it is a next page now isn't it?).