1

バインディングを使用してノックアウト監視可能な配列にバインドされたコンテナー div にいくつかの div がありforeachます。それはうまく機能しています。

ノックアウト afterAdd イベントでは、jQuery を使用して (新しく作成された) div のクリック イベントのリスナーを作成します。

                 mydiv.click(function () { 
                    // delete the corresponding item from 
                    // the observable array                     
                    self.myobservableArray.splice($(this).index(), 1);
                });

div をクリックすると削除されます。div がビューから消えます。それはうまく機能しています。

各 div もドラッグ可能にします。 

                 mydiv.draggable({revert:"invalid"});

ドラッグアンドドロップは正常に機能しています。

ただし、 divを droppable にドラッグ アンド ドロップした後にdiv をクリックしても、消えません。ドロップ可能なものにしがみついている、またはドロップ可能なものにしがみついています。div を忘却に送るには、div を 2 回クリックする必要があります。

この動作を回避するためにできることはありますか?

4

1 に答える 1

4

イベント（同じ要素に対する複数のイベント登録）に関係していると思います。これは、最初のクリック（閉じる）で動作する私の例です jsfiddle.net/dhanasekaran/P9C7E

<div data-bind="foreach:items">
    <a href="#" class="item" data-bind="draggable:true,droppable:true">
        <span  data-bind="text:$data"></span>
        <i data-bind="click:$parent.remove">X</i>
    </a>
</div>

ko.bindingHandlers.draggable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).draggable();
    }
};

ko.bindingHandlers.droppable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).droppable();
    }
};

var vm=function(){
    var self=this;
    self.items=ko.observableArray();
    self.init=function(){
        self.items(['One','Two','Three','Four','Five','Six']);
    }
    self.remove=function(item){
        console.log(item);
        self.items.remove(item);
    }
    self.init();
}

ko.applyBindings(new vm());
于 2013-09-30T12:09:21.327 に答える