jQuery根据面板使用knockoutJS

我试图在默认的ASP.NETMVC项目中使用jQuery面板和knockoutJS。根据面板在没有数据绑定的情况下工作正常

添加数据绑定事件后，展开/折叠功能就不起作用了

@section Scripts {
  <script type="text/javascript" src="@Url.Content("~/Scripts/knockout-2.2.0.js")"></script>
  <script src="~/Scripts/jquery-ui-1.8.24.js"></script>
  <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
  <script>
    $(document).ready(function () {
      $('#accordion').accordion({
        active: false,
        collapsible: true
      });
    });
  </script>

  <script type="text/javascript">
    function AppViewModel() {
      var self = this;
      self.orders = ko.observableArray();
      $.getJSON("api/orders", self.orders);
    }

    $(document).ready(function () {
      ko.applyBindings(new AppViewModel());
    });
  </script>
}


<ul id="accordion"  data-bind="foreach: orders">
  <li>
    <h3><a href="#">header</a></h3>
    <div>
      Content goes here
    </div>
  </li>
</ul>

@节脚本{
$（文档）.ready（函数（）{
$（'手风琴'）。手风琴({
活动：错误，
可折叠：正确
});
});
函数AppViewModel（）{
var self=这个；
self.orders=ko.observearray（）；
$.getJSON（“api/orders”，self.orders）；
}
$（文档）.ready（函数（）{
应用绑定（新的AppViewModel（））；
});
}


内容在这里

使用手风琴击出装订

 ko.bindingHandlers.accordion = {
 init: function (element, valueAccessor) {
    var options = valueAccessor() || {};
    setTimeout(function () {
        $(element).accordion(options);
    }, 0);

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).accordion("destroy");
    });
 },
 update: function (element, valueAccessor) {
    var options = valueAccessor() || {};
    $(element).accordion("destroy").accordion(options);
  }
}

---

我通过设置超时来解决这个问题

$(document).ready(function () {

            setTimeout(function () {
                $("#accordion")
                  .accordion({
                      //header: "> div > h3",
                      collapsible: true
                      , active: false
                      , heightStyle: "content"
                      // ,icons: icons
                      //, event: "click hoverintent"
                  })
                  .sortable({
                      axis: "y",
                      handle: "h3",
                      stop: function (event, ui) {
                          var items = [];
                          ui.item.siblings().andSelf().each(function () {
                              //compare data('index') and the real index
                              if ($(this).data('index') != $(this).index()) {
                                  items.push(this.id);
                              }
                          });
                          // IE doesn't register the blur when sorting
                          // so trigger focusout handlers to remove .ui-state-focus
                          ui.item.children("h3").triggerHandler("focusout");
                          if (items.length) $("#sekvens").text(items.join(','));
                          ui.item.parent().trigger('stop');
                      }
                  })
                  .on('stop', function () {
                      $(this).siblings().andSelf().each(function (i) {
                          //kjører for alle "childs" i accordian...
                          $(this).data('index', i);
                      });
                  })
                 .trigger('stop');
            }, 1000);

            ko.applyBindings(new AppViewModel());


        });

---

我尝试了代码，但不幸的是问题仍然存在。如果您正在从服务器获取数据，那么它是否正确映射到订单数组。试着调试