jqueryui displaying an array

by kougiland

HTML

<script src="http://rniemeyer.github.io/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://cloud.github.com/downloads/knockout/knockout/knockout-2.2.0.js"></script>
<div data-bind="template: 'tabsTmpl'"></div>

<script id="tabsTmpl" type="text/html">
    <div data-bind="jqTabs: { fx: { opacity: 'toggle' } }">
        <ul>
            {{each tabs}}
            <li>
                <a href="#tab-${id}">${id}</a>    
            </li>
            {{/each}}
        </ul>
        {{each tabs}}
        <div id="tab-${id}" data-bind="template: { name: 'tabTmpl', data: $value }"></div>
        {{/each}}
    </div>
</script>

<script id="tabTmpl" type="text/html">
    <div data-bind="template: { name: titleTmpl, data: titleData }"></div>
    <div data-bind="template: { name: contentTmpl, data: contentData }"></div>
</script>

<script id="normalTitleTmpl" type="text/html">
    <h2 data-bind="text: name + ' - ' + date.toLocaleString()"></h2>
</script>

<script id="specialTitleTmpl" type="text/html">
    <h2 class="special" data-bind="text: name + ' - ' + special"></h2>
</script>

<script id="normalContentTmpl" type="text/html">
    <h3 data-bind="text: date.toLocaleString()"></h3>
    <p data-bind="text: content"></p>
</script>

<script id="specialContentTmpl" type="text/html">
    <h3 class="special" data-bind="text: special"></h3>
    <p data-bind="text: content"></p>
    <div data-bind="template: { name: 'employeeTmpl', foreach: $root.employees }">
    </div>          
</script>
    
<script id="employeeTmpl" type="text/html">
      <strong>
        <span class='employees' data-bind="text: Name"></span>
      </strong>&nbsp;&nbsp;<br>
</script>

JavaScript

ko.bindingHandlers.jqTabs = {
    init: function(element, valueAccessor) {
        var options = valueAccessor() || {};
        $(element).tabs(options);
    }
};

function employee(EmpID, Name, Phone, DeptID) {
    return {
        EmpID: ko.observable(EmpID),
        Name: ko.observable(Name),
        Phone: ko.observable(Phone),
        DeptID: ko.observable(DeptID),
    };
}

function department(DeptID, DeptName) {
    return {
        DeptID: ko.observable(DeptID),
        DeptName: ko.observable(DeptName),
    };
}

function Tab(id, title, titleTmpl, content, contentTmpl) {
    return {
        id: ko.observable(id),
        titleData: ko.observable(title),
        titleTmpl: titleTmpl,
        contentData: ko.observable(content),
        contentTmpl: contentTmpl 
    };
}

var viewModel = {
    tabs: ko.observableArray([
        new Tab(1, 
                { name: "one", date: new Date() }, 
                "normalTitleTmpl",
                { content: "one content", special: "special content" } ,
                "specialContentTmpl"),
        new Tab(2, 
                { name: "two", special: "special title!" }, 
                "specialTitleTmpl", 
                { content: "two content", special: "special content" } ,
                "specialContentTmpl")
    ]),
    employees: ko.observableArray([
        new employee(201, "Gerald", "574-234-1234", 101),
        new employee(202, "Andy", "574-234-2345", 102),
        new employee(203, "Ed", "574-234-3456", 102),
        new employee(204, "Bill", "574-234-4567", 103),
        new employee(205, "Frank", "574-234-5678", 103),
        new employee(206, "Chris", "574-234-6789", 104),
        new employee(207, "Dave", "574-234-7891", 104),
    ]),
    departments: ko.observableArray([
        new department(101, "Executive Services"),
        new department(102, "Human Resources"),
        new department(103, "Marketing"),
        new department(104, "Sales"),
    ]),
};

ko.applyBindings(viewModel);