由Knockout JS支持的手风琴内部JQuery UI Sortable的困难

Question

请参阅jsFiddle链接，以获取我要构建的UI。 首先，用户选择会议。 所选会议的事件显示在“手风琴”中，每个事件都有一些表，这些表在“手风琴”中以纯HTML表格显示。 用户应该能够拖放表格并自定义其排序顺序。 所有这些都得到了Knockout JS的支持，该JS到目前为止运行良好，但是我遇到了障碍……

我遇到的第一个问题是“数据绑定”手风琴。 我实现了在此处找到的自定义绑定处理程序解决方案，这似乎很好用。 但是，我似乎无法可靠地连接Table记录的可排序功能。

我不能简单地调用$(".sortable tbody").sortable(); 在$(document).ready(function(){}); 。 尽管这对于第一个会议有效，但是一旦SelectedConference更改，可排序功能就会丢失。 我可以将其添加到手风琴的自定义活页夹的更新功能中：

update: function (element, valueAccessor) {

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

            //TODO: add sortable call here
        }

这似乎可行，但是我对定制活页夹不熟悉。 这是低效的吗？ 有更好的方法来实现可排序的功能吗？

谢谢！

Answer 1

不必担心自定义绑定处理程序，它们是放置这种逻辑的正确位置。

但是，我建议您只为可排序逻辑创建一个新的自定义绑定，因为它与您的手风琴无关：

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

然后，您可以将其用于html：

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

演示JSFiddle 。