Knockout Js texting Tab Menu

by TemaMix

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<div data-bind="foreach: views">
     <a href="#" data-bind="text: title, click: $root.selectedView"></a>&nbsp;
</div>
<hr/>

<div data-bind="with: selectedView">
    <div data-bind="template: { name: templateName, data: data }"></div>
</div>

<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>
<div data-bind="foreach: menuTitle">
     <a href="#" data-bind="text: title, click: $root.goToTab"></a>&nbsp;
</div>
<hr/>
<div data-bind="with:menuModel">
    <ul data-bind="foreach: dishes.items">
        <li>
            <span data-bind="text: id"></span>
            <input data-bind="value: name" />
        </li>
    </ul>
</div>    
<div data-bind="with:commentModel">
     First: <input data-bind="value:comment.firstName" />
     Last:  <input data-bind="value:comment.lastName" />
</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 menuModel() {
    var self=this;
    self.currentCategory=ko.observable();
    self.dishes=ko.observable(new View("one", "oneTmpl", subModelA));
    self.title="menu";
}

function commentModel() {
    var self=this;
    self.currentComment=ko.observable();
    self.comment=ko.observable(new View("two", "twoTmpl", subModelB));
    self.title="comment";
}

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

ko.applyBindings(new tabMenu());