Question

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

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

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

所以，我开始编写自己的自定义绑定，但是我又撞到了另一面墙。当我将生成的项放入表中时，我创建一个新元素，添加类，拖动项的属性，并将其附加到td，但该元素的敲除绑定未完成...

代码：

    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()会返回此错误：You cannot apply bindings multiple times to the same element.

由于未完成数据绑定，表中的项目仍然是不可分割的。

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

Answer 1

在我看来，你应该尝试KO Template bindings，看看第2节的foreach绑定。模板将根据您指定的模式呈现每个新删除的对象，并且将为新元素自动添加新绑定。

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

Knockout拖放表

1 个答案: