jquery - knockout 拖放表

Question

我有一个用 Knockout 制作的表格，我想实现拖放界面来排列表格中的项目。基本上，我有一个 div，可以在其中生成新项目，然后可以将其放入表中。此外，表格中已有的项目必须是可拖动的。

我一直在研究现有的解决方案，最好的解决方案之一是 rniemeyer's ，但他使用 jQueryUI 的 sortable 小部件。

这对我不起作用的原因是它在数组中的给定位置插入新元素，但我需要它来覆盖它们。

所以，我开始编写自己的自定义绑定(bind)，但我遇到了另一堵墙。当我将生成的项目放入表中时，我创建一个新元素，添加所拖动项目的类和属性，并将其附加到 td 中，但该元素的 knockout 绑定(bind)尚未完成...

代码:

    var dragData = {};

    ko.bindingHandlers.draggable = {
        init: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());
            var dragElement = $(element);
            var dragOptions = {
                revert: true,
                revertDuration: 0,
                start: function (event, ui) {
                    dragData = value.data;
                }
            };

            dragElement.draggable(dragOptions).disableSelection();
        }
    };

    ko.bindingHandlers.droppable = {
        init: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());
            var dropElement = $(element);
            var dropOptions = {
                drop: function (event, ui) {
                    var div = $('<div/>', {
                        'data-bind': "draggable: " +
                            "{ " +
                                "revert: true," +
                                "revertDuration: 0," +
                                "opacity: 0.75," +
                                "data: " +
                                    "{" +
                                        "selectedSubject: " + dragData.selectedSubject + "," +
                                        "selectedTeacher: " + dragData.selectedTeacher + "," +
                                        "numberOfClasses: 1" +
                                    "}" +
                            "}"
                    }).addClass('schedule-item panel-info');

                    $(div).append('<div class="row">' + dragData.selectedSubject + '</div>');
                    $(div).append('<div class="row">' + dragData.selectedTeacher + '</div>');

                    dropElement.html(div);
                }
            };

            if (value.accept)
                ko.utils.extend(dropOptions, { accept: value.accept });

            if (value.hoverClass)
                ko.utils.extend(dropOptions, { hoverClass: value.hoverClass });

            if (value.tolerance)
                ko.utils.extend(dropOptions, { tolerance: value.tolerance });

            dropElement.droppable(dropOptions);
        }

ko.applyBindings() 返回此错误:您无法将绑定(bind)多次应用于同一元素。

由于数据绑定(bind)尚未完成，因此表格中的项目仍然不可拖动。

有没有办法完成数据绑定(bind)？或者有没有办法在 jQuery UI sortable 小部件中实现“覆盖”机制？

Answer 1

在我看来你应该尝试KO Template bindings ，请参阅第 2 节了解 foreach 绑定(bind)。模板将根据您指定的模式渲染每个新放置的对象，并且将自动为新元素添加新绑定(bind)。

看起来您正在绕过 ko 并将新元素直接插入到 DOM 中，而在这种情况下，knockout 不会添加新绑定(bind)。