Question

I have an application that’s running Knockout with a few jQuery plugins, the one in question here being jQuery UI Tabs.

Through some searching, I’ve found that the data held by jQuery’s data plugin ($(someElt).data()) exists until I apply the bindings through Knockout.

After that, the data held by jQuery is gone, which makes the plugin think it’s not initialized.

What makes this stranger is that my outer set of tabs (there are tabs for the page and tabs in one of the panes of the page’s tabs) works fine.
The inner tabs, however, have this issue.

There are no bindings directly on either of the containers for the tabs, though there are some on elements inside and outside of both (though neither should cause any actual removal of DOM elements).

Any thoughts?

Edit: Here is a test case I created (I’m using jQuery 1.9.2 and Knockout 2.2.1):

<div id="OutterTabContainer">
  <ul>
    <li>
      <a href="#OutterTab1">Outter Tab 1</a>
    </li>
    <li>
      <a href="#OutterTab2">Outter Tab 2</a>
    </li>
  </ul>
  <div id="OutterTab1">
    This is the first tab.
    <div data-bind="visible: test2">This should be invisible</div>

  </div>
  <div id="OutterTab2">
    This is the second tab.
    <div data-bind="text: test1()"></div>

    <div data-bind="with: testObj()">
      <div id="InnerTabContainer">
        <ul>
          <li>
            <a href="#InnerTab1">Inner Tab 1</a>
          </li>
          <li>
            <a href="#InnerTab2">Inner Tab 2</a>
          </li>
        </ul>
        <div id="InnerTab1">
          This is the first of the inner tabs.
        </div>
        <div id="InnerTab2">
          This is the second of the inner tabs.
          @*<div data-bind="text: innerTest()"></div>*@
        </div>
      </div>
    </div>

  </div>
</div>

<script type="text/javascript">
  (function($, ko, undefined) {
    var outterTabs = $("#OutterTabContainer"),
        innerTabs = $("#InnerTabContainer"),
        viewModel = {
          test1: ko.observable("test 1"),
          test2: ko.observable(false),
          testObj: ko.observable({
            innerTest: ko.observable("inner")
          })
        };

    //creating tabs, works fine
    outterTabs.tabs();
    innerTabs.tabs();

    setTimeout(function() {
      //simulating an ajax success callback
      ko.applyBindings(viewModel);
      innerTabs.tabs("select", 1);
    }, 1000);

  })(jQuery, ko);
</script>

In creating this, I found that the culprit is the “with” binding in tab 2. I’m still not sure why that binding would cause this issue, so I’m still looking for an adequate workaround for this. I guess if push comes to shove, I could defer the inner tab initialization until after the view model is bound.

Edit 2: I’ve been looking through the knockout source code, and it’s looking like the with binding runs the same code as the if and ifnot bindings. It looks like the element bound to the with is turned into a virtual element, and from what I can tell, those virtual elements are destroyed and recreated when bindings are applied, so the element itself (and all child elements, including the tab container) would be a different one from the element that was there before. I’m guessing that’s why the data isn’t there anymore (since it’s saved by dom node).

Answer 1

As per my suggestion, you could try something like this (now tested!):

ko.bindingHandlers["tab"] = {
   init: function(element) {
       $(element).tabs();
   }
};

And then:

<div id="InnerTabContainer" data-bind="tab: $data">

Edit: as it turns out, a binding needs some data, even if you aren’t using it.

Here’s a fiddle