bootstrap tabs

by rniemeyer

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://knockoutjs.com/downloads/knockout-2.0.0.js"></script>
<div class="tabbable">
  <ul class="nav nav-tabs" data-bind="foreach: tabs">
    <li data-bind="css: { active: $root.selected() === $data }">
        <a href="#" data-bind="click: $root.selected, text: title"></a>
    </li>
  </ul>
  <div class="tab-content" data-bind="foreach: tabs">
    <div class="tab-pane" data-bind="css: { active: $root.selected() === $data }">
      <p data-bind="text: content"></p>
    </div>
  </div>
</div>

JavaScript

function Tab(id, title, content) {
    this.id = ko.observable(id);
    this.title = ko.observable(title);
    this.content = ko.observable(content);
}

var viewModel = {
    tabs: ko.observableArray([
        new Tab(1, "one", "one content"), 
        new Tab(2, "two", "two content"), 
        new Tab(3, "three", "three content")
    ]),
    selected: ko.observable()
};

//select second tab by default
viewModel.selected(viewModel.tabs()[1]);

ko.applyBindings(viewModel);