title: Backbone.js hashed url change automatically on default value
body: <p>Problem is: When I go to step2. step2 fier well and after it for some reason "start" route active. How to solve this problem?</p>
  
  <p>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?</p>
  
  <p>Short code below.</p>
  
  <p>I have a simple page with minimum markup</p>
  
  <pre><code>&lt;div id="contentHolder"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And also some backbone stuff</p>
  
  <pre><code> 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");
      }
  });
  </code></pre>
  
  <p><em>Only main code listed, much auxiliary code skipped. Be sure - all object assigned. i check it multiple times.</em></p>
  
  <p><strong>UPD:</strong> 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.</p>
  
  <p><strong>UPD</strong> now it works in the following order:</p>
  
  <ol>
  <li>Step1View.gotoStep2</li>
  <li>Router.step2</li>
  <li>WizardView.render</li>
  <li>Step2View.initialize</li>
  <li>Step2View.render</li>
  <li>router.start</li>
  </ol>
  
  <p>router.start obviously should not be called </p>