knockout.js - ノックアウトでドロップされたドラッグ要素を削除する方法

Question

ドラッグ アンド ドロップする 2 つのカスタム バインディングがあり、ドロップ可能な領域にドロップする必要がある要素のリストがありますが、これが発生した場合、ドラッグした要素をソース リストから削除する必要があります。次のようにしています。 、しかし、ドラッグされた要素がソースリストから削除された場合、「プロパティ 'オプション' の値を取得できません: オブジェクトが null または未定義です」というエラーが表示され、jquery-ui.1.8.17 でデバッガーが中断します。 .min.js ファイルのこの行var d=a(this).data("draggable").options。この問題は、ドラッグ バインディングで発生します。

これが私のコードです：

 var viewModelInstance = new ViewModel();
$(document).ready(function () {
    $(window).load(
        function () {
            var _dragged;
            ko.bindingHandlers.drag = {
                init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                    var dragElement = $(element);
                    var dragOptions = {
                        helper: 'clone',
                        revert: true,
                       start: function () {
                           _dragged = ko.utils.unwrapObservable(valueAccessor().value);
                           },
                        cursor: 'default'
                    };
                    dragElement.draggable(dragOptions).disableSelection();

                }
            };

            ko.bindingHandlers.drop = 
            {
                init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                    var dropElement = $(element);
                    var dropOptions = {
                        drop: function (event, ui) {
                            var folder = dropElement[0].innerText;
                            viewModelInstance.UpdateCandidate(_dragged, viewModel, folder);
                           viewModelInstance.candidates.remove(_dragged);
                        }
                    };
                    dropElement.droppable(dropOptions);
                }
            };
            ko.applyBindings(viewModelInstance);

    });
        }
    );
});

Answer 1

「setTimeout」を追加して、ノックアウトがリストから要素を削除する前にドラッグ操作を終了させることで、エラーを回避することができました。

あなたの場合、コードの変更は次のようになります。

drop: function (event, ui) {
    var folder = dropElement[0].innerText;
    setTimeout( function(){
        viewModelInstance.UpdateCandidate(_dragged, viewModel, folder);
        viewModelInstance.candidates.remove(_dragged);
    },10);
}

これがうまくいくことを願っています:)

Answer 2

remove() ではなく detach() を使用してみてください。