jqueryui displaying an array

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://cloud.github.com/downloads/knockout/knockout/knockout-2.2.0.js"></script>
<div data-bind="jqTabs: { fx: { opacity: 'toggle' } }">
    <ul data-bind="foreach: tabs">
        <li>
            <a data-bind="attr: { href: '#tab-' + id() }, text: titleData().name"></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: contentTmpl, data: contentData }"></div>
</script>



<script id="anfrageWannContentTmpl" type="text/html">
    <h3  data-bind="text: content"></h3>
    sie befinden Sich in anfrage wann
</script>

<script id="anfrageWasContentTmpl" type="text/html">
    <h3 data-bind="text: content"></h3> 
    sie befinden Sich in anfrage was
</script>

<script id="anfrageWoContentTmpl" type="text/html">
    <h3  data-bind="text: content"></h3>
    sie befinden Sich in anfrage wo
</script>

<script id="anfrageRechnungContentTmpl" type="text/html">
    <h3 data-bind="text: content"></h3>
    sie befinden Sich in anfrage rechnung
</script>

CSS

h3 { font-weight: bold; font-size: 1.2em; }

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, /* the ID of the TAB*/
                { name: "Wann"}, "titleTmpl",/* the title of the TAB*/
                { content: "anfrage Wann"},/* the header of the TAB*/
                "anfrageWannContentTmpl"),/*Template to use*/ 
        new Tab(2, 
                { name: "Was"}, "titleTmpl", 
                { content: "anfrage Was"} ,
                "anfrageWasContentTmpl"),
        new Tab(3, 
                { name: "Wo"}, "titleTmpl", 
                { content: "anfrage Wo"} ,
                "anfrageWoContentTmpl"),
        new Tab(4, 
                { name: "Rechnung"}, "titleTmpl", 
                { content: "anfrage Rechnung"} ,
                "anfrageRechnungContentTmpl")
    ])
};
//viewModel.tabs()[3] =ko.observable(false);

ko.applyBindings(viewModel);