jQuery UI tabs

https://groups.google.com/d/topic/knockoutjs/L-437Dk4okQ/discussion

by kougiland

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<div data-bind="jqTabs: { fx: { opacity: 'toggle' } }">
        <ul data-bind="foreach: tabs">
            <li>
                <a data-bind="attr:{href:'#tab-' + id()}, text:id"></a>
            </li>
        </ul>
        <!-- ko foreach: tabs -->
        <div data-bind="attr: {id: 'tab-'+id()}, template: { name: 'tabTmpl', data: $data }"></div>
        <!-- /ko -->
</div>

<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>
</script>

CSS

h2 { font-weight: bold; font-size: 1.2em; }
.special { font-size: 1.25em; color: red; }

JavaScript

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


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", date: new Date() } ,
                "normalContentTmpl"),
        new Tab(2, 
                { name: "two", special: "special title!" }, 
                "specialTitleTmpl",
                { content: "two content", date: new Date() } ,
                "normalContentTmpl"),
        new Tab(3, 
                { name: "three", date: new Date() }, 
                "normalTitleTmpl",
                { content: "three content", special: "special content" } ,
                "specialContentTmpl")
    ])
};

ko.applyBindings(viewModel);