Dynamic tabs with knockoutjs - introduction

There is many beautifull javascript tabs-widget examples across the web, many of them fit perfectly for the regular scenarios of displaying static or dynamic content. When talking about dynamic content - it usually means that objects which showed in each tab is from the same type, only the quantity of tabs may vary. (like this example - each tab must have the same structure of header and content).
In this post i will demonstrate how to create tabs widget where each tab is represent a different kind of javascript module, which act independently and in coexistence with other tabs-modules.

i decided to divide this post to 4 parts (so it will be more convenient to read) 

introduction - the Social Netwok app 

part 1 - create a simple tabs widget with knockoutjs (next post)

part 2 - create  3 viewModels for each kind of tabs (next next post)

part 3 - get all the stuff to work together (next next next post)

So here is the first part:

the Social Netwok app - the spec
Lest say we want to create social network, with 'search-firends' page, 'display person details' page and 'home' page, only instead of pages - each view will be displayed on different tab panel:
home:

search:

person details:

To achieve this goal we will need to define 3 kind of different javascript functionalities - one for each page/tab:  'Search' -must be able to perform the  persons search, 'home' -must display the friends list, and 'person details' -must display details of person and to add this person to the friend list which appears on the 'home' page.

Expect of acting independently each functionality must at the same time to connect with other 'brothers' (like add person to friends list)   and to connect with the tabs widget - (like open search view inside tab).

Note that in some cases tabs should be able to contain multiple instances of objects from same type- like two persons...

I hope you enjoyed reading this post so far

so if you want to continue - here is the next part