Question

我有一个运行带有一些jQuery插件的Knockout的应用程序，这里讨论的是jQuery UI Tabs。

通过一些搜索，我发现jQuery的数据插件($(someElt).data())所拥有的数据一直存在，直到我通过Knockout应用绑定。

之后，jQuery保存的数据消失了，这使得插件认为它没有初始化。

这个陌生人的原因是我的外部选项卡（页面的选项卡和页面选项卡的一个选项卡中的选项卡）工作正常。
但是，内部选项卡存在此问题。

对于选项卡的任何一个容器都没有直接绑定，尽管两者内部和外部都有一些元素（尽管两者都不会导致实际删除DOM元素）。

有什么想法吗？

编辑：这是我创建的测试用例（我使用的是jQuery 1.9.2和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>

在创建这个时，我发现罪魁祸首是标签2中的“with”绑定。我仍然不确定为什么绑定会导致这个问题，所以我仍然在寻找一个适当的解决方法。我想如果push推进，我可以推迟内部选项卡初始化，直到绑定视图模型。

编辑2：我一直在查看淘汰源代码，它看起来像with binding运行与if和ifnot绑定相同的代码。看起来绑定到with的元素变成了一个虚拟元素，从我可以看出，这些虚拟元素在应用绑定时被销毁并重新创建，因此元素本身（以及所有子元素，包括tab容器）将与之前的元素不同。我猜这就是数据不再存在的原因（因为它是由dom节点保存的）。

Answer 1

根据我的建议，你可以试试这样的东西（现在已经过测试了！）：

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

然后：

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

编辑：事实证明，绑定需要一些数据，即使你没有使用它。

这是fiddle

Answer 2

我对手风琴有同样的问题（来自jQuery UI），结果Benjamin对'with'处理程序是正确的，导致元素认为它没有初始化（感谢man你是一个很好的帮助）。

我测试了Matt提供的解决方案，它不是提供给修复问题的元素的$ data，而是绑定完成后内部选项卡的初始化。这是迄今为止我发现的唯一解决方案。这是解决这个问题的唯一方法吗？

编辑：经过一番挖掘后，我发现IE8没有正确处理'with'处理程序（虚拟元素），删除它将解决问题。

应用Knockout Bindings清除IE 7和8中的jQuery数据

2 个答案: