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方法

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!");
            }
        });
    }

已删除的记录未从列表淘汰中删除

2 个答案: