JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<h3>
    <span>Selected: </span>
    <span data-bind="text: selectedSection().name" />
</h3>
<div class="tabbable">
    <ul class="nav nav-tabs" data-bind="foreach: sections">
        <li data-bind="css: { active: isSelected }">
            <a href="#" data-bind="click: $parent.selectedSection">
                <span data-bind="text: name" />
            </a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" data-bind="template: { name: getTemplate }"></div>
    </div>
</div>

<script id="wann" type="text/html">
    <div>wann content</div>
     <a href="#" data-bind="click: toggleVisibility">Toggle</a>
    <br />
    <table>
        <tr data-bind="visible: showRow"><td>Some Text</td></tr>
    </table>
</script>

<script id="was" type="text/html">
    <div>was content</div>
</script>

<script id="wo" type="text/html">
    <div>wo content</div>
</script>

<script id="rechnung" type="text/html">
    <div>rechnung content</div>
</script>

JavaScript

var Section = function (name, selected) {
    this.name = name;
    this.isSelected = ko.computed(function() {
       return this === selected();  
    }, this);
}
function viewAttached(){
   // $(".tabbable ul li:first-child").hide();
}
var ViewModel = function () {
    var self = this;
    viewAttached = viewAttached();
    self.selectedSection = ko.observable(true);
    
    self.sections = ko.observableArray([
            new Section('wann', self.selectedSection),
            new Section('was', self.selectedSection),
            new Section('wo', self.selectedSection),
            new Section('rechnung', self.selectedSection)
    ]);
    //console.log(self.sections()[2]);
    //inialize to the first section
    self.selectedSection(self.sections()[0]);
    
    self.getTemplate = function(item) {
        var selected = self.selectedSection();
        return selected && selected.name;  
    };
    //toggle visibility
    self.showRow = ko.observable(false);
    self.toggleVisibility = function() {

        self.showRow(!self.showRow());
        console.log('showRow is now ' + self.showRow());
    };
}

ko.applyBindings(new ViewModel());