Bootstrap 3 - Tabs

by ksingh24

HTML

<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<br><br>

<div id="tabs" data-bind="foreach: tabs">
  <div class="tab" data-bind="css: {selected: $parent.selectedTab() == id()}, text: name, click: $parent.selectedTab.bind($parent, id())"></div>
</div>


<br><br> Table 1

<div id="tabContent" data-bind="foreach: tabs">
  <div data-bind="if: $parent.selectedTab() == id()">


    <table class="table table-bordered">
      <thead class="mbhead">
        <tr class="mbrow">
          <th>ID</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody data-bind="foreach: items">
        <tr>
          <td>
            <span data-bind="text: id"></span>
          </td>
          <td>
            <span data-bind="text: firstName"></span>
          </td>
          <td>
            <span data-bind="text: lastName"></span>
          </td>
          <td>
            <select class="form-control">
           <option value="">--Select--</option>
           <option value="m">Male</option>
           <option value="f">Female</option>          
         </select>
          </td>
        </tr>
      </tbody>
    </table>

    <br> Table 2

    <table class="table table-bordered">
      <thead class="mbhead">
        <tr class="mbrow">
          <th>Position</th>
          <th>Salary</th>
          <th>Department</th>
        </tr>
      </thead>
      <tbody data-bind="foreach: employee">
        <tr>
          <td>
            <input type="text" class="form-control textbox" />
          </td>
          <td>
            <input type="text" class="form-control textbox" />
          </td>
          <td>
            <input type="text" class="form-control textbox" />
          </td>
          <td>
        ...

JavaScript

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

    self.Tab = function(id, name, text, selected) {
      var tab = this;
      tab.id = ko.observable(id);
      tab.name = ko.observable(name);
      tab.text = ko.observable(text);
      return tab;
    };
    self.selectedTab = ko.observable(1);
    self.tabs = new Array();
    self.tabs.push(new self.Tab(1, 'Tab 1', 'Wecome to Tab #1!'));
    self.tabs.push(new self.Tab(2, 'Tab 2', 'This is Tab 2...'));
    self.tabs.push(new self.Tab(3, 'Tab 3', 'I\'m tab 3'));
    self.tabs.push(new self.Tab(4, 'Tab 4', 'Hello World!'));


    self.items = ko.observableArray([{
        id: "1",
        firstName: "Bob",
        lastName: "Hen"
      },
      {
        id: "2",
        firstName: "Henry",
        lastName: "Arman"
      }
    ]);

    self.employee = ko.observableArray([]);

    self.add = function() {
      self.employee.push(new Employee());
    };

    self.remove = function(data) {
      self.employee.remove(data);
    };

    self.Save = function() {
      alert('Saved');
    };
  }

  var Item = function(fname, lname, id) {
    var self = this;

    self.id = ko.observable(id);
    self.firstName = ko.observable(fname);
    self.lastName = ko.observable(lname);
  };
  var Employee = function(pos, sal, dep) {
    var self = this;

  };
  vm = new ViewModel()
  ko.applyBindings(vm);

})();