JSFiddle - React, Tailwind, and code Playground

by Sourabh Tewari

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<!-- List all of the tabs, this first tab definition is the home tab you talked 
     about where you would click to open the other stations -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a>
  </li>
  <!-- ko template: { name: 'tab-definition-template', foreach: tabs } -->
  <!-- /ko -->
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">
    This is your home tab with links to the other tabs :D
    <br/>
    <button class="btn btn-success" data-bind="click: createNewTab">new tab</button>
  </div>
  <!-- ko template: { name: 'tab-template', foreach: tabs } -->
  <!-- /ko -->
</div>

<script type="text/html" id="tab-definition-template">
  <li>
    <a role="tab" data-toggle="tab" data-bind="text: name, attr: {'href': ('#' + id)}"></a>
  </li>
</script>

<!-- this would work better as a component -->
<script type="text/html" id="tab-template">
  <div class="tab-pane" data-bind="text: data, attr: {'id': id}"></div>
</script>

JavaScript

var vm = (function() {
  function tab(data, name, id) {
    return {
      id: id || name.replace(/ +?/g, ''),
      name: name,
      data: data
    };
  };

  var createNewTab = function() {
    var tl = tabArray().length;
    tabArray.push(new tab('amazing tab data: ' + tl, 'tab ' + tl));
  }

  // the following data is just  to fill out the tabs,
  // you would replace with var tabArray = ko.observableArray([]);
  // once you had everything working
  var tabArray = ko.observableArray([
    new tab('working', 'firstTab'),
    new tab('tab2', 'secondTab', 2),
    new tab('thirdTab', 'third')
  ]);

  return {
    tabs: tabArray,
    createNewTab: createNewTab
  };
})();

ko.applyBindings(vm)