1

我正在使用 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>
4

2 回答 2

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，因为您正在使用data来自 ajax 调用的响应，并尝试从数组中删除该文字对象。该实际对象不在数组中，因为它只是从 ajax 响应创建的。

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

尝试这样的事情：

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

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

于 2013-09-27T12:32:46.483 回答
0

在您要求所有票后不久，为什么还要尝试从阵列中删除一张票？另外，我想如果 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>
于 2013-09-27T22:16:58.493 回答