Ph0en1x Ph0en1x -4 years ago 133
jQuery Question

Backbone.js hashed url change automatically on default value

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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download