3

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

我一直在研究现有的解决方案，最好的解决方案之一是rniemeyer 的，但他使用 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小部件中实现“覆盖”机制？

4

1 回答 1

0

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

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

于 2014-09-08T13:52:56.717 回答