Knockout Js texting Tab Menu

by TemaMix

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script id="oneTmpl" type="text/html">
    <ul data-bind="foreach: items">
        <li>
            <span data-bind="text: id"></span>
            <input data-bind="value: name" />
        </li>
    </ul>
</script>

<script id="twoTmpl" type="text/html">
    First: <input data-bind="value: firstName" />
    Last:  <input data-bind="value: lastName" />
</script>
<hr/>

<script id="mainMenu" type="text/html">
 <div data-bind="foreach:page">   
     <a href="#" class="menuItem" data-bind="text:title, click: $root.goToTab"></a>&nbsp;
   </div>


<div class="withData" data-bind="with:currentData">
    <div data-bind="foreach: menuTitle">
     <a href="#" class="menuItem" data-bind="text:title, click: $parent.goToTab"></a>&nbsp;
    </div>
     <hr/>
    <div data-bind="with:currentData">
        <p data-bind="text:title" ></p>
       <div data-bind="template: { name: dataObject.templateName, data: dataObject.data }"></div>
    </div> 
</div>
</script>




<div data-bind="template:'mainMenu', data:page"></div>

JavaScript

var View = function(title, templateName, data) {
   this.title = title;
   this.templateName = templateName;
   this.data = data; 
};

var subModelA = {
    items: ko.observableArray([
        { id: 1, name: "one" },
        { id: 2, name: "two" },
        { id: 3, name: "three" }
      ])
};
 
var subModelB = {
    firstName: ko.observable("Bob"),
    lastName: ko.observable("Smith") 
};






function tabModel(dataObject,title,currentObj) {
    var self=this;
    self.currentObj=currentObj;
    self.dataObject=dataObject;
    self.title=title;
}

function tabMenu(title,menu) {
    var self=this;
    self.views=ko.observableArray([
        new View("one", "oneTmpl", subModelA),
        new View("two", "twoTmpl", subModelB)
        ]);
    
    self.menu=new tabModel(new View("one", "oneTmpl", subModelA),"menu1"); // вкладка меню
    self.comment=new tabModel(new View("two", "twoTmpl", subModelB),menu); // вкладка комментариев
    self.menuTitle=ko.observableArray([self.menu, self.comment]);
    self.currentData=ko.observable(self.menu);
    self.currentTab=ko.observable(self.menu); // текущая вкладка
    self.goToTab=function(tab) {// передается объект menuTitle
        self.currentTab(tab);
        self.currentData(tab);                  
    };            
    
    self.title=title;
    self.selectedView=ko.observable();
    self.selectedView(self.views()[0]);         
};

function subMenu() {
   var self=this;
   self.page=ko.observableArray([new tabMenu("active1","active-menu1"), new tabMenu("active2","active-menu2")]);
   self.currentTab=ko.observable(self.page()[0]); // текущая вкладка    
   self.currentData=ko.observable(self.page()[0]);  
   self.goToTab=function(tab) {// передается объект menuTitle
        self.currentTab(tab);
        self.currentData(tab);                  
    }; 
    
}

var tab =new subMenu();
ko.applyBindings(tab);