拖放列表 - 雙擊刪除項目

Question

是否有可能添加事件以從拖放列表中刪除itom以及關聯observableArray（使用可排序）？

我一直使用相同的邏輯消除在多選擇列表中雙擊嘗試過，但沒有成功：

HTML：

<div class="list"> 
    <h2>Stored procedures In DB 2</h2> 
    <ul class="list" data-bind="sortable: { data: storedProceduresInDB2, beforeMove: checkAndCopy }, event: { dblclick: removeFromDb2 }"> 
     <li class="item" data-bind="text: Name"></li> 
    </ul> 
</div> 

代碼：

var ViewModel = function() { 
    var self = this; 
    self.storedProceduresInDB1 = ko.observableArray([ 
     { Name: 'SP1', Id: 1 }, 
     { Name: 'SP2', Id: 2 }, 
     { Name: 'SP3', Id: 3 } 
    ]); 
    self.storedProceduresInDB2 = ko.observableArray([ 
     { Name: 'SP3', Id: 3 }, 
     { Name: 'SP4', Id: 4 }, 
     { Name: 'SP5', Id: 5 } 
    ]); 
    self.storedProceduresInDB2Orig = ko.observableArray([ 
     { Name: 'SP3', Id: 3 }, 
     { Name: 'SP4', Id: 4 } 
    ]); 
    self.selectedStoredProcedureInDB1 = ko.observable(); 
    self.selectedStoredProcedureInDB2 = ko.observable(); 
    self.selectStoredProcedureInDB1 = function (sp) { 
     self.selectedStoredProcedureInDB1(sp); 
    }; 
    self.selectStoredProcedureInDB2 = function (sp) { 
     self.selectedStoredProcedureInDB2(sp); 
    }; 
    self.checkAndCopy = function(event) { 
     var targetHasItem = ko.utils.arrayFilter(event.targetParent(), function(item) { 
      return item.Id == event.item.Id; 
     }).length; 
     if(!targetHasItem) { 
      event.targetParent.splice(event.targetIndex, 0, event.item); 
     } 
     if(event.targetParent != event.sourceParent) { 
      event.cancelDrop = true; 
     } 
    }; 

    self.removeFromDb2 = function(item, event){  
     self.storedProceduresInDB2.remove(function(item) { 
      var nameToRemove = $(event.currentTarget).find("option:selected").text(); 
      var isOrig = ko.utils.arrayFirst(self.storedProceduresInDB2Orig(), function(item){ 
       return item.Name == nameToRemove; 
      }); 
      return !isOrig && item.Name == nameToRemove; 
     }); 
    } 
}; 

ko.applyBindings(new ViewModel()); 

JSFiddle

Answer 1

雙擊LI不會讓它被選中，所以你的jQuery找到nameToRemove沒有找到正確的文本。取而代之的是，使用這個（你可以做到這一點的remove功能外，因爲只需要抓住一個：

var nameToRemove = $(event.target).text(); 

這裏的updated JSFiddle