Dynamic tabs with knockoutjs - part 2

Creating 3 simple different widgets
In this post we will create a 3 simple widgets which will be hosted inside the tabs.

Home widget
This widget shows the friends collection, and able to open search page.
Model:

var homeViewModel=function(){  
  this.typename='home';    
  this.templName='homeTmpl';
  this.friends=ko.observableArray([{name:'Shlomo'}]) 
};

View:

<script id="homeTmpl" type="text/html">
 <h3>
  wellcome to Social Network!</h3>
 <b>friends: </b> <hr/>
   <ul data-bind="foreach:friends">
   <li data-bind="text:name"></li> </ul> <div> Wanna find more friends? <button data-bind="click:openSearchTab"
>click here</button><
 /div> </script> <!--ko template: { name: 'homeTmpl' }--><!--/ko-->

demo
Search widget
This widet must show the search engine:
To simplify the functionality, our search may find only to persons:
Vasia and Kolia

Model:

var searchViewModel=function(){
  
  this.typename='search';  
  var that=this;
  this.results=ko.observableArray([]);
  this.searchterm=ko.observable();

  this.clickSearch=function(){
  
    this.results([]);//empty the results array 
    switch(that.searchterm()){   
      case 'k':
        this.results.push({firstname:'Kostia',lastname:'Baranov'});
        break;
      case 'v':    
        this.results.push({firstname:'Vasia',lastname:'Kozlov'});
        break;
   default :
     this.results.push({firstname:'Vasia',lastname:'Kozlov'});
  this.results.push({firstname:'Kostia',lastname:'Baranov'});
    }
  };
  
  
  this.templName='searchTmpl';
};

View:

  <script id="searchTmpl" type="text/html">
    <div data-bind="text:typename">
    </div>
    <input data-bind="value:searchterm" />
    <button class="o" data-bind="click:clickSearch">press</button>

    <table data-bind="foreach:results" class="results">
      <tr>
        <td data-bind="text:firstname,click:$parent.openPersonTab"></td>
      </tr>
    </table>
    </div>
  </script>

demo
Person widget
This widget must show the person details and be able to add this person to friends
array:

Model:

var personViewModel=function(firstname,lastname){
  var that=this;
  this.firstname=ko.observable(firstname);
  this.lastname=ko.observable(lastname);


  this.templName="personTmpl";  
}

View:

  <script id="personTmpl" type="text/html">
    <section class="person"> <img src="img/placeholder.png" alt="pic" />
      <div> <b>first name:</b>
        <label data-bind="text:firstname"></label>
      </div>
      <div> <b>last name:</b>
        <label data-bind="text:lastname"></label>
      </div>
      <button data-bind="click:addFriend">add as friend</button>
    </section>
  </script>
  <!--ko template: { name: 'personTmpl', data: person }-->
  <!--/ko-->

demo
you can download source from github
Now that all 'insider' widgets are ready - we can proceed to the next step