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/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.debug.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}">${title}</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">
    <iframe data-bind="attr: { src: url }"></iframe>
</script>

JavaScript

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


function Tab(id, title, url) {
    this.id = ko.observable(id);
    this.title = ko.observable(title);
    this.url = ko.observable(url);
}

var viewModel = {
    tabs: ko.observableArray([new Tab(1, "one", "http://cnn.com"), new Tab(2, "two", "http://knockoutjs.com"), new Tab(3, "three", "http://knockmeout.net"), new Tab(4, "kougiland", "http://kougiland.com")])
};

ko.applyBindings(viewModel);