Knockout.js ko.applyBindings() hierarchy binding

http://stackoverflow.com/questions/9256938/knockout-js-ko-applybindings-hierarchy-binding

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<div>
    Show Results
    <button data-bind="click: ShowData">Search</button>
    
</div>

<div style="display:none" data-bind="visible: showResults">
   <table width="100%" id="tblSearchResults" data-bind="visible: SearchResults().length>0">
   <thead >
     <tr >
       <th align="left">Name</th>
       <th>Gender</th>
       <th align="left">DOB</th>
       <th align="left">Join Date</th>
       <th style="width:26px"></th>
     </tr>
     </thead>
       <!-- Template is used here but cannot get it to work on fiddle -->
     <tbody id="EmpResults" data-bind="template: { name:'TmplSearchResults', foreach: SearchResults }">
      

    </tbody>
            
        
</table>
</div>

 <!-- Edit EmpDetails Details  -->
<div id="EditEmp" style="display:none" data-bind="visible: EditEmployee">
<table>
<tr>
     <td> Name </td>
    <td><input type="text" data-bind="value: name" /></td>
</tr>    
    
   <td> Gender </td>
   <td><input type="radio" id="rdMale" name="Gender" value='M' data-bind="checked: gender" />   
    <input type="radio" id="rdFemale" name="Gender" value='F' data-bind="checked: gender" /></td>  

<tr>
  <td>DOB</td>
  <td><input type="text" data-bind="value:dob" /></td>
</tr>
    
<tr>
  <td>Join Date</td>
  <td><input type="text" data-bind="value:joindate" /></td>
</tr>

</table>
    
     <div align="center">
        <button type="button" id="btnSave" class="submitButton" text="Save" data-bind="click:SaveEmpDetails" >Save</button>
	  </div>
</div>

<script type="text/html" id="TmplSearchResults">  
     <tr style="border-bottom: 1px solid #CCC;">
       <td valign="middle" data-bind="text: name"></td>
       <td valign="middle" align="center" data-bind="text:...

JavaScript

//View Model
var vmSearchResultsModel = function () 
{
    var self = this;
    self.showResults = ko.observable(false); // Show/Hide Search Results
   self.EditEmployee = ko.observable(false); //Show/Hide Editing
   self.ShowSearchFilters = ko.observable(true); //Show/Hide Search Filters
 self.SearchResults = ko.observableArray([]);  //Holds the results of the search mapped from ajax call
    self.name = ko.observable("");
    self.dob = ko.observable("");
    self.gender = ko.observable("");
    self.joindate = ko.observable("");

  
// Edit Employee Details
  self.EditEmpDetails = function (index, data) {
     
  self.ShowSearchFilters(false); //Show/Hide Search Filters
  self.showResults(false); // Show/Hide Search Results
       self.EditEmployee(true);
  //#region Poplulate observables
    self.CurrentIndex = index;
    
   
    self.name(data.name);
      self.gender(data.gender);
    self.dob(data.dob);
    self.joindate(data.joindate);
    
  }

  // Show Results when Search Button is created
  self.ShowData = function () {
    
      self.SearchResults(fakeData);
      
            self.showResults(true);
       
  }
 
  // Fake save but do the actual splicing
  self.SaveEmpDetails = function () {
      self.EditEmployee(false);
      self.showResults(true);
      var getjsondata = ko.toJSON(self.SearchResults, ['name', 'gender','dob', 'joindate']) // select only what is required to show
console.log(getjsondata);
var obj = JSON.parse(getjsondata);  // convert JSON to JS string
console.log(JSON.parse(getjsondata));
self.SearchResults.splice(self.CurrentIndex, 1, getjsondata);
  }
    
}
$(document).ready(function () {
ko.applyBindings(new vmSearchResultsModel());
    });
//Fake data  
var fakeData=[{
   "name": "Adrian D'Costa",
  "dob": "25-10-1984",
  "gender": "M",
  "joindate": "30-12-2004"},
{

   "name": "Janet D'Curz",
  "dob": "30-08-1992",
  "gender": "F",
  "joindate": "15-12-2005"}];