Question

我正在使用Knockout将表单的数据绑定到表中，现在我面临的是，当我从表中删除数据时，它会转到服务器端并删除数据但是数据仍然存在，除非我们刷新了非实用的页面。所以我试着在服务器端调用索引方法，它在刷新数据库之后给出了数据列表但是当我这样做时。刷新的数据被附加到数据上保留在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);来查看您尝试删除已删除邮件的位置。但是，这不太可能从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>

删除Knockout.js中的数据后刷新ViewModel

2 个答案: