如何添加路由到淘汰应用程序

Question

今天我的应用程序在淘汰赛中写了一个问题。我想为我的应用添加深度路由，但我从来没有这样做过。我不知道如何开始以及如何modyfi或更改我的应用程序。我在this link中看到了一个示例，但我不知道如何在我的应用中使用它。我需要一些在淘汰赛中具有更多实施路由经验的人的帮助。我的应用程序位于jsfiddle代码中，位于

之下

HTML

<form action="#"> 
    <input placeholder="Search…" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off"> 
  </form>

  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <ul class="name-list" data-bind="foreach: filteredPeople">
          <li data-bind="attr:{class: $index == 0 ? 'active' : ''}, click: toggleshowMoreInfo" role="button">
            <span class="full-name" data-bind="text: fullName"></span>
          </li>

          <div class="hidden-sm hidden-md hidden-lg" data-bind="slideVisible: showMoreInfo, fadeDuration:600,template: {name: 'person-template'}"></div>
        </ul>

      </div>

      <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 hidden-xs" data-bind="foreach: filteredPeople">
        <div class="row" data-bind="slideVisible: showMoreInfo, fadeDuration:600,template: {name: 'person-template'}"></div>
      </div>
    </div>
  </div>


  <!-- template for presonal information -->
  <script type="text/html" id="person-template">
    <div class="col-xs-12 col-md-6">
      <p><span data-bind="text: fullName"></span></p>
    </div>
  </script>

JS

var data = [
  {
    "index": 0,
    "name": [{
      "first": "Barlow",
      "last": "Moore"
    }]
  },
  {
    "index": 1,
    "name": [{
      "first": "Valeria",
      "last": "Meadows"
    }]
  },
  {
    "index": 2,
    "name": [{
      "first": "Constance",
      "last": "Singleton"
    }]
  },
  {
    "index": 3,
    "name": [{
      "first": "Wilder",
      "last": "Steele"
    }]
  }
];

  var stringStartsWith = function (startsWith, string) {          
    string = string || "";
    if (startsWith.length > string.length)
        return false;
    return string.substring(0, startsWith.length) === startsWith;
  };

  ko.bindingHandlers.slideVisible = {
    update: function(element, valueAccessor, allBindings) {
      var value = valueAccessor();
      var valueUnwrapped = ko.unwrap(value);
      var duration = allBindings.get('fadeDuration') || 400;
      if (valueUnwrapped == true)
        setTimeout(function(){ $(element).fadeIn(duration); }, duration);
      else
        $(element).fadeOut(duration);
    }
  };

  /* show all data from json */
  function PersonInfo(data) {
    this.firstName = ko.observable(data.name[0].first);
    this.lastName = ko.observable(data.name[0].last);
    this.fullName = ko.computed(function() {
      return this.firstName() + " " + this.lastName();
    }, this);

    this.showMoreInfo = ko.observable(false);
    this.toggleshowMoreInfo = function () {
      this.showMoreInfo(!this.showMoreInfo())
    }
  }

  function PersonInfoViewModel() {
    var self = this;
    self.query = ko.observable('');
    self.mappedPersonalData = $.map(data, function(item) {  
      return new PersonInfo(item) 
    });
    self.filteredPeople = ko.computed(function () {
        return self.mappedPersonalData.filter(function (value) {
            if(self.query() === '' || self.query() === null){
               return true; //no query
            }
            if (stringStartsWith(self.query().toLowerCase(), value.firstName().toLowerCase()) || stringStartsWith(self.query().toLowerCase(), value.lastName().toLowerCase())){
               return true;
            }
            return false;
        });
    }); 
  }

  var viewModel = new PersonInfoViewModel();

  $(document).ready(function() {
    ko.applyBindings(viewModel);
  });