Question

Problem is: When I go to step2. step2 fier well and after it for some reason “start” route active. How to solve this problem?

the scenario is following. I start from step one -> going to step 2 -> it renders step2view and immediately going to start route again. What is the reason of such behavior?

Short code below.

I have a simple page with minimum markup

<div id="contentHolder">
</div>

And also some backbone stuff

 var StateModel = Backbone.Model.extend({
        defaults: { state: "start" }
    });

    var StepModel = Backbone.Model.extend({
        defaults: { selected: [], location: null }
    });

    var WizardView = Backbone.View.extend({
        router: null,

        nestedViewModels: [],

        initialize: function () {
            this.model.bind("change", this.render, this);
            this.render();
        },

        render: function () {
            switch (this.model.get("state")) {
                case "start":
                case "step1":
                    var step1 = new Step1View({el: $("#contentHolder")});
                    break;
                case "step2":
                    var step2 = new Step2View({el: $("#contentHolder")});
                    break;
                case "step3":
                    var step3 = new UploadView({el: $("#contentHolder")});
                    break;
            }
        }
    });

var Step1View = Backbone.View.extend({
       goToStep2: function(){
         router.navigate("!/step2", true);
       }
    });
    var Step2View = Backbone.View.extend({    
    });

//wizard - is a global variable
var Router = Backbone.Router.extend({

    routes: {
        "": "start",
        "!/step1": "step1",
        "!/step2": "step2"
    },

    start: function () {
        wizard.model.set("state", "start");
    },

    step1: function () {
        wizard.model.set("state", "step1");
    }

    step2: function () {
        wizard.model.set("state", "step2");
    }
});

Only main code listed, much auxiliary code skipped. Be sure – all object assigned. i check it multiple times.

UPD: All next view render to the same place as previous one. And after Step2 renders url change to default for some reason. so instead of url…#!/step2 it change to url…# And i think this is why router fire “start”. But I don’t understand – what things change url.

UPD now it works in the following order:

1. Step1View.gotoStep2
2. Router.step2
3. WizardView.render
4. Step2View.initialize
5. Step2View.render
6. router.start

router.start obviously should not be called

Answer 1

I solve this at last and now dancing victory jig)))
The problem was coused by my Step2 button. It was a link (anchor) itself, and it has href=”#”. so After I press on it and all scrips works fine it change my url to a.href value. Thats was why default url applied