Knockout Js Tab Menu

Multi Tab Menu or multi pages on knockoutjs =) Zengile! questions? write me [email protected]

by TemaMix

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script id="tabsTpl" 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="tabTPL" type="text/html">
    
<div data-bind="foreach:children">
        <a href=""  data-bind="text:title, click:$parent.goToTab, css:{selected:$data==$parent.currentTab()}" ></a>         
</div>


        <div data-bind="with:currentTab">
 <div class="testing" data-bind="if:($data.dataObject!='')?true:false">
    <div data-bind="template:{name:'dataTPL', data:$data}"></div>
    </div> 
             <div class="test" data-bind="if:(children().length>0)?true:false">
                 <hr/>
                <div data-bind="template:{name:'tabTPL', data:$data}"></div>
                 
            </div>            
     </div>
     
</script>

<script id="dataTPL" type="text/html">
    <p class="testing" data-bind="text:(dataObject!='')?'yes':'no'"></p>
    <div data-bind="template: { name: dataObject.templateName, data:dataObject.data }"></div>
</script>    

<div data-bind="template:{name:'tabTPL', data:$root.pages}">

CSS

.selected {
    color:red;
}

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 pageModel(title,dataObject,children,link){
    var self=this;
    // Данные
    self.title=title; // имя страницы
    self.dataObject=dataObject||[]; // объект вложенный в страницу
    self.children = ko.observableArray(children||[]); // дети если есть
    self.linkTo=link||[]; // ссылка на страницу 
    // Логика
    self.currentTab=ko.observable(self.children()[0]||[]); // какую текущую страничку потомка отображать
    self.goToTab=function(tab) {// при клике на какую страничку потомка перейти
      self.currentTab(tab);
    }
}

// модель построения
var tabPage={
        pages:new pageModel("Main Page",'',[new pageModel('File','',[
                                                                                  new pageModel('New File'), new pageModel('Open File')  ]), 
                                                  new pageModel('Edit','',[new pageModel('User File',new View('first','tabsTpl',subModelA)), new pageModel('Pages'), new pageModel('Head')]),
                                                  new pageModel('Help')])          
 };

// вызов
ko.applyBindings(tabPage);