title: Keep track of tabs with knockoutjs + twitter bootstrap
body: <p>I'm trying to keep track of the selected tab in the view model but I can't seem to make it work.</p>
  
  <p>In the following code when you click a tab the header will update correctly but the content of the tab is not displayed. If you remove <code>, click: $parent.selectSection</code> then the contents are shown but the header does not update.</p>
  
  <p>Now if you remove the <code>data-bind="css: { active: selected }"</code> from the <code>li</code> then it seems to work when you click the tabs but the button to select the second tab doesn't.</p>
  
  <p>How can I make this work?</p>
  
  <p>See: <a href="http://jsfiddle.net/5PgE2/3/" rel="noreferrer">http://jsfiddle.net/5PgE2/3/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;h3&gt;
      &lt;span&gt;Selected: &lt;/span&gt;
      &lt;span data-bind="text: selectedSection().name" /&gt;
  &lt;/h3&gt;
  &lt;div class="tabbable"&gt;
      &lt;ul class="nav nav-tabs" data-bind="foreach: sections"&gt;
          &lt;li data-bind="css: { active: selected }"&gt;
              &lt;a data-bind="attr: { href: '#tab' + name }
  , click: $parent.selectSection" data-toggle="tab"&gt;
                  &lt;span data-bind="text: name" /&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="tab-content" data-bind="foreach: sections"&gt;
          &lt;div class="tab-pane" data-bind="attr: { id: 'tab' + name }"&gt;
              &lt;span data-bind="text: 'In section: ' + name" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;button data-bind="click: selectTwo"&gt;Select tab Two&lt;/button&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var Section = function (name) {
      this.name = name;
      this.selected = ko.observable(false);
  }
  
  var ViewModel = function () {
      var self = this;
      self.sections = ko.observableArray([new Section('One'),
      new Section('Two'),
      new Section('Three')]);
      self.selectedSection = ko.observable(new Section(''));
      self.selectSection = function (s) {
          self.selectedSection().selected(false);
  
          self.selectedSection(s);
          self.selectedSection().selected(true);
      }
  
      self.selectTwo = function() { self.selectSection(self.sections()[1]); }
  }
  
  ko.applyBindings(new ViewModel());
  </code></pre>