在由Knockout JS支持的Accordion中使用JQuery UI排序的困难

Question

请参见我正在尝试构建的UI的jsFiddle链接here。首先，用户选择一个会议。所选会议的事件显示在Accordion中，每个事件都有表格，这些表格在Accordion中显示为纯html表格。用户应该能够拖放表格并自定义它们的排序顺序。所有这一切都得到了Knockout JS的支持，到目前为止，它工作得很好，但我遇到了一个障碍……

我遇到的第一个问题是“数据绑定”手风琴。我实现了自定义绑定处理程序解决方案here，这似乎工作得很好。但是，我似乎不能可靠地将表记录的可排序功能连接起来。

我不能简单地在$(document).ready(function(){});中调用$(".sortable tbody").sortable();。虽然这适用于第一次会议，但一旦SelectedConference更改，可排序功能就会丢失。我可以将它添加到Accordion的自定义绑定器的更新函数中：

update: function (element, valueAccessor) {

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

            //TODO: add sortable call here
        }

这似乎是可行的，但我对定制绑定器是个新手。这是不是效率低下？有没有更好的方法来实现可排序功能？

谢谢!

Answer 1

不要担心custom binding handlers，他们是放置这种逻辑的正确位置。

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

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

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

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

演示JSFiddle。