Question

我正在尝试在默认的ASP.NET MVC项目中使用jQuery面板和knockoutJS。根据小组没有data-bind="foreach: orders"工作正常。

添加data-bind事件后，展开/折叠功能不起作用。

@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>

Answer 1

使用手风琴敲击绑定。

 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);
  }
}

Fiddle Demo

Answer 2

我设法通过设置超时来解决它。

$(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());


        });

带有knockoutJS的jQuery Accordion面板

2 个答案: