Knockout Tabs

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="http://knockoutjs.com/js/knockout-1.1.1.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/excite-bike/jquery-ui.css">
<div id="mytabs" data-bind="tabs: {name: 'tabBarTemplate' }">

<script id='tabBarTemplate' type='text/x-jquery-tmpl'>
<div id="${tabBarId}" class="tabContainer ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"
data-bind="template: {name: 'tabItemTemplate', foreach: tabItems}">
</ul>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<div class="tabsContent" data-bind="template: {name: tabTemplateId(), data: tabContentModel}">
</div></div>
</div>
</script>

<script id='tabItemTemplate' type='text/x-jquery-tmpl'>
<li class="ui-state-default ui-corner-top track" data-bind="css: { 'ui-tabs-selected': selected, 'ui-state-active': selected }, click: onClick, omniClick: {}">
<div class="tabContent"><span class="font14"><a href='#${tag}' class="track" omniture="${track}">${label}<span data-bind="visible: (alertCount()>0),text:alertCount" class="tabAlertCountBadge">0</span></a></span></div>
</li>
</script>

JavaScript

model = {};
model.tabBarId = ko.observable("myBar");
model.selectedTag = ko.observable("Tab2");
model.tabItems = ko.observableArray([{
    label: "First",
    tag: "Tab1",
    selected: false},
{
    label: "Second",
    tag: "Tab2",
    selected: true},
{
    label: "Third",
    tag: "Tab3",
    selected: false}]);

<div id="mytabs" data-bind="tabs: {name: 'tabBarTemplate' }">
ko.applyBindings(model);