title: Twitter Bootstrap nav tabs conflict with KnockoutJS
body: <p>I'm having a problem with <a href="http://twitter.github.com/bootstrap/components.html#navs" rel="nofollow">"Basic Tabs"</a>. I'm rendering the tabs in a View in MVC and then I have bunch of KnockoutJS code in three different Partial Views.</p>
  
  <p>My problem is that Knockout is conflicting with other Knockout code because each Partial View creates a MVVM and applies bindings.</p>
  
  <p>Is there some way I can skip rendering the DIV (with the Partial Views) until the relevant tab is pressed?</p>
  
  <p>Here is my code for the regular View:</p>
  
  <pre><code>&lt;ul class="nav nav-tabs" id="myTab"&gt;
      &lt;li class="active"&gt;&lt;a href="#attributes"&gt;Attributes&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#interestgroups"&gt;Interest groups&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#categories"&gt;Categories&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="tab-content"&gt;
      &lt;div id="attributes" class="tab-pane active"&gt;
          @Html.Partial("_AttributesPartial")
      &lt;/div&gt;
      &lt;div id="interestgroups" class="tab-pane"&gt;
          @Html.Partial("_InterestGroupsPartial")
      &lt;/div&gt;
      &lt;div id="categories" class="tab-pane"&gt;
          @Html.Partial("_InterestGroupCategoriesPartial")
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function () {
          $('#myTab a:first').tab('show');
      });
  
      $('#myTab a').click(function (e) {
          e.preventDefault();
          $(this).tab('show');
      });
  &lt;/script&gt;
  </code></pre>