已刪除的記錄沒有從列表中刪除

Question

記錄（comment）嵌套在foreach循環中。當我刪除記錄時，它從數據庫中刪除，但不從列表中刪除。當我刷新頁面時，它從列表中刪除。

我的HTML代碼是：

<span data-bind="foreach:showAds"> 
    //some stuff 
    <span data-bind="foreach:showComment"> 
     <span data-bind="attr:{'id':id}"> 
      <span data-bind="text:description"></span> 
      <span data-bind="text:postedById"></span> 
      <span data-bind="click:function(){ $parent.deleteComment($data.id)}">delete</span> 
     </span> 
    </span> 
</span> 

js代碼是：

function comment(data) { 
     var self = this; 
     data = data || {}; 
     self.description = ko.observable(data.description); 
     self.postedById = data.postedById; 
     self.adId = data.adId; 
     self.id = data.id; 
    } 
    function ad(data) { 
     var self = this; 
     data = data || {}; 
     //some stuff 
     self.showComment = ko.observableArray(); 
     if (data.comment) { 
      var cmt = $.map(data.comment, function (item) { return new comment(item); }); 
      self.showComment(cmt); 
     } 
     self.deleteComment = function (id) { 
      $.ajax({ 
       url: '/api/Comment/DeleteComment/' + id, 
       dataType: "json", 
       contentType: "application/json", 
       cache: false, 
       type: 'POST', 
       success: function (data) { 
        //Also how to map single object? $.map() is not working for single object so I mapped it manually. 
        var com = new comment(); 
        com.id = data.Id; 
        com.description = data.description; 
        com.adId = data.adId; 
        self.showComment.remove(com); //whats wrong here? 
       }, 
       error: function() { 
        toastr.error("failed to delete comment", "Error!"); 
       } 
      }); 
     } 
    } 
    function viewModel() { 
     var self = this; 
     self.showAds = ko.observableArray(); 
     //load data using ajax and map in showAds. 
    } 
    ko.applyBindings(new viewModel()); 

Answer 1

看看這個官方文檔例子

<ul data-bind="foreach: places"> 
    <li> 
     <span data-bind="text: $data"></span> 
     <button data-bind="click: $parent.removePlace">Remove</button> 
    </li> 
</ul> 

<script type="text/javascript"> 
    function MyViewModel() { 
     var self = this; 
     self.places = ko.observableArray(['London', 'Paris', 'Tokyo']); 

     // The current item will be passed as the first parameter, so we know which place to remove 
     self.removePlace = function(place) { 
      self.places.remove(place) 
     } 
    } 
    ko.applyBindings(new MyViewModel()); 
</script> 

見的第一個參數是當前元素（所以你可以要求該元素的id） 。

self.deleteComment = function (comment) { 
    $.ajax({ 
     url: '/api/Comment/DeleteComment/' + comment.id, 
     type: 'POST', 
     success: function (data) { 
      self.showComment.remove(comment); 
     } 
    }); 
} 

現在還記得，即可使用方法，而無需創建一個新的功能

click: $parent.deleteComment 

，而不是

click: function(){ $parent.deleteComment($data.id)} 

Answer 2

嘗試使用自定義remove（）函數。正常刪除正試圖匹配一個完全匹配的對象，而且您沒有填充所有字段。既然你已經有了ID，只需使用：

self.deleteComment = function (id) { 
     $.ajax({ 
      url: '/api/Comment/DeleteComment/' + id, 
      dataType: "json", 
      contentType: "application/json", 
      cache: false, 
      type: 'POST', 
      success: function (data) { 
       self.showComment.remove(function(item){ 
        return item.id == id; 
       }); 
      }, 
      error: function() { 
       toastr.error("failed to delete comment", "Error!"); 
      } 
     }); 
    }