由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 。