javascript - 由 Knockout JS 支持的 Accordion 内部 JQuery UI 可排序的困难

Question

查看 jsFiddle 链接 here对于我正在尝试构建的用户界面。首先，用户选择 session 。所选 session 的事件显示在 Accordion 中，每个事件都有表，这些表在 Accordion 中显示为纯 html 表格。用户应该能够拖放表格并自定义其排序顺序。所有这一切都由 Knockout JS 支持，到目前为止，它运行得很好，但我遇到了障碍......

我遇到的第一个问题是“数据绑定(bind)” Accordion 。我实现了自定义绑定(bind)处理程序解决方案，发现 here ，这似乎效果很好。但是，我似乎无法可靠地连接表记录的可排序功能。

我不能简单地在 $(document).ready(function(){}); 中调用 $(".sortable tbody").sortable();.尽管这对于第一个 session 有效，但一旦 SelectedConference 发生更改，可排序功能就会丢失。我可以将它添加到 Accordion 的自定义 Binder 的更新功能中:

update: function (element, valueAccessor) {

            var options = valueAccessor();
            $(element).accordion("destroy")
            $(element).accordion({ active: "h3:last", collapsible: true });

            //TODO: add sortable call here
        }

这似乎有效，但我对自定义 Binder 很陌生。这效率低吗？有没有更好的方法来实现可排序功能？

谢谢!

Answer 1

不用担心custom binding handlers它们是放置这种逻辑的正确位置。

但是我建议您应该仅为可排序逻辑创建一个新的自定义绑定(bind)，因为它与您的 Accordion 无关:

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

然后你可以在你的html中使用它:

<tbody data-bind="foreach: Tables, sortable: {}">

演示 JSFiddle .