刪除Knockout.js中的數據后刷新ViewModel

Question

我正在使用Knockout將表單數據綁定到表，現在我面臨的是，當我從表中刪除數據時，它會到達服務器端並刪除數據，但是除非我們刷新該數據，否則數據會保留在那里。因此，我嘗試在服務器端調用index方法，該方法在刷新數據庫后為我提供了數據列表，但是當我這樣做時，將刷新的數據附加到保留在數據庫中的數據中view.i表示既顯示剩余數據又顯示刷新數據，但實際上僅顯示刷新數據。 我的代碼：

<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);來查看嘗試刪除已刪除項目的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

Answer 2

在索要所有票證后不久，為什么還要嘗試從陣列中刪除一張票證呢？ 而且我想如果GetTickets確實返回了所有票證，您實際上並不想使用“推”。

<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();

        **DeleteTicket(tickid);**
    }
});

function DeleteTicket(tickid) {
    $.ajax({
        type: "POST",
        data: { id: tickid },
        url: "Ticket/DeleteTicket",
        success: function (data) {
            alert("Record Deleted Successfully");
            **GetTickets()**
        },
        error: function (error) {
            alert(error.status + "<--and--> " + error.statusText);
        }
    });
}

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