title: Simple Knockout.js routing using HTML5 History API
body: <p>I have inherited a knockout.js app that is due to the client tomorrow. The app only has three views, but was not setup for routing at all. The last request is to add some basic routing so that a user can go straight to a "page".  I am trying to make this happen my using <code>"pushState"</code> inside of my View Model.  For example, I have the following function which takes the user to the Objectives View ("page"):</p>
  
  <pre><code>var masterViewModel = new MasterViewModel();
  
  function MasterViewModel(){
      var self = this;
      self.objectivesVM = ko.observable(null);
  
      self.goToObjectives = function () {
          self.lifeStyleVM(null);
          self.testVM(null);
          self.formVM(null);
  
          window.history.pushState(null, "Outcomes Page", "#outcomes");
  
          $('#header-main').show();
          $('body').scrollTop(0);
          $('#splash').hide();
          $('.navbar-nav li').removeClass('active');
          $('.out-quiz').addClass('active');
  
          // Starting level: Based on test results
          var vm = new ObjetivesVM();
          if(self.scoreVM() &amp;&amp; self.scoreVM().testScore()){
              vm.skipTest = ko.observable(false);
          }
          else{
              // Starting level manual selection
              console.log("test was not taken");
              vm.skipTest = ko.observable(true);
          }
  
          self.objectivesVM(vm);
  
          for (i = 1; i &lt; 4; i++) {
              document.getElementById('range-' + i).addEventListener('change', function(){
                  this.setAttribute('value', this.value);
              })
          }
  }
  </code></pre>
  
  <p>I then "route" to this view on click via the following:</p>
  
  <pre><code>&lt;a data-bind="event: {click: $root.goToObjectives}" href="#"&gt;Outcomes Quiz&lt;/a&gt;
  </code></pre>
  
  <p>I know this is a workaround, but as you can see I have added <code>window.history.pushState(null, "Outcomes Page", "#outcomes");</code> inside of the <code>goToObjetives()</code> function so that I can append a hash to the url. With that added, I am attempting to use the following function:</p>
  
  <pre><code>if (window.location.hash === '#outcomes') {
  
      masterViewModel.goToObjectives();
  }
  </code></pre>
  
  <p>to send the user to the 'outcomes' view if the '#outcomes' hash is appended to the url.  This is directing to the correct view, but none of the data is there?  Anyone have any ideas.  I know this is a workaround but it's last minute.</p>