javascript - 在 Knockout.js 中删除数据后刷新 ViewModel

Question

我正在使用 Knockout 将表单数据绑定(bind)到表，现在我面临的是，当我从表中删除数据时，它会转到服务器端并删除数据，但数据仍保留在那里，除非我们刷新页面，这不切实际。所以我尝试在服务器端调用索引方法，该方法在刷新数据库后为我提供数据列表，但是当我这样做时。刷新的数据被附加到数据中保留在 View 上。我的意思是它显示剩余数据和刷新数据，但实际上它只显示刷新数据。我的代码:

<table id="table2" style="border: double">
    <thead>
        <tr>
            <td>Ticket ID</td>
            <td>Ticket Type</td>
            <td>No of Tickets</td>
            <td>Ticket Price</td>
            <td>Start Date</td>
            <td>End Date</td>
            <td>Action</td>
        </tr>
    </thead>
    <!--Iterate through an observableArray using foreach-->
    <tbody id="ticketid" data-bind="foreach:TicketDatas">
        <tr style="border: solid" data-bind="click: $root.getselectedTicket" id="updtr">
            <td data-bind="text:TicketId">@*<span data-bind="text:No_Of_Ticket"></span>*@</td>
            <td data-bind="text:SelectedTicketType">@*<span data-bind="text:No_Of_Ticket"></span>*@</td>
            <td data-bind="text:No_Of_Ticket">@*<span data-bind="text:No_Of_Ticket"></span>*@</td>
            <td data-bind="text:Ticket_Price">@*<span data-bind="text:Ticket_Price"></span>*@</td>
            <td data-bind="text:Start_Date">@*<span data-bind="text:Start_Date"></span>*@</td>
            <td data-bind="text:End_Date">@*<span data-bind="text:End_Date"></span>*@</td>
            <td><button id="deletelink">Delete</button></td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
$("#deletelink").live('click', function () {
    if (confirm('Are you sure to Delete this ticket ??')) {
        var deleteLink = $(this);
        var tableRow = deleteLink.closest('tr');
        var firstCell = tableRow.find('td:first-child');
        var tickid = firstCell.text();
        //var tickid = $("#table2 tbody tr td:eq(0)").html();
        $.ajax({
            type: "POST",
            data: { id: tickid },
            url: "Ticket/DeleteTicket",
            //data: "{id:" + ko.toJSON(id) + "}",
            success: function (data) {
                self.TicketDatas.remove(data);
                alert("Record Deleted Successfully");
                //ko.mapping.fromJS(self.TicketDatas, data)
                //GetTickets();//Refresh the Table
            },
            error: function (error) {
                alert(error.status + "<--and--> " + error.statusText);
            }
        });
        // alert("Clicked" + employee.EmpNo)
    }
});

function GetTickets() {
    //Ajax Call Get All Employee Records
    $.ajax({
        type: "GET",
        cache: false,
        url: "Ticket/GetAllTickets",
        contentType: "application/json; charset=utf-8",
        data: {},
        dataType: "json",
        success: function (data) {
            for (var i = 0; i < data.length; i++) {
                self.TicketDatas.push(data[i]);
            }
        },
        error: function (error) {
            alert(error.status + "<--and--> " + error.statusText);
        }
    });
    //Ends Here
}
</script>

Answer 1

在你的 ajax 调用中，我注意到你有一个像这样的成功处理程序:

success: function (data) {
    self.TicketDatas.remove(data);
    alert("Record Deleted Successfully");
    //ko.mapping.fromJS(self.TicketDatas, data)
    //GetTickets();//Refresh the Table
},

我可以通过调用 self.TicketDatas.remove(data); 来查看您尝试在何处删除已删除的项目。。但是，这不太可能从客户端 TicketDatas 数组中删除任何内容，因为您正在使用 ajax 调用响应中的 data，并尝试从数组中删除该文字对象。该实际对象不在数组中，因为它只是从 ajax 响应创建的。

从数组中删除对象时，您需要通过索引来引用它，或者通过指向与数组中的对象相同的内存地址的对象引用。

尝试这样的事情:

success: function (data) {
    self.TicketDatas.remove(ko.dataFor(deleteLink));
    ...
},

http://knockoutjs.com/documentation/unobtrusive-event-handling.html