JSFiddle - React, Tailwind, and code Playground

by psteele

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<div class="tabbable">
    <ul id="ops" class="nav nav-tabs" data-bind="foreach: tabs">
        <li> <a data-toggle="tab" data-bind="text: title, attr: { href: '#' + tabId }"></a></li>
    </ul>
    <div class="tab-content" data-bind="foreach: tabs">
        <div class="tab-pane active" data-bind="attr : { id: tabId }, foreach: buttons">
            <div class="row">
                <div class="span1" data-bind="ifnot: builderId && builderId != ''"></div>
                <button class="span1" data-bind="if: builderId && builderId != '', attr: { id: builderId }"><i class="icon-wrench"></i></button>
                <button class="action span3" data-bind="text: title" />
            </div>
        </div>
    </div>
</div>

JavaScript

var ViewModel = function () {
    var self = this;

    self.tabs = [
        {
            "tabId": "testOPS",
            "title": "Test",
            "buttons": [
                {
                "builderId": "create",
                "actionFunction": "doStuff",
                "title": "Button1",
                "additionalHTML": null
                },
                {
                "builderId": "",
                "actionFunction": "somethingElse",
                "title": "B2",
                "additionalHTML": null
                }
            ]
        }
    ];
}

ko.applyBindings(new ViewModel());