在Knockout.js中刪除數據後刷新ViewModel

我正在使用Knockout將表單的數據綁定到表中，現在我可能面臨的是當我從表中刪除數據時，它將轉到服務器端並刪除數據以及數據保持在那裏，除非我們刷新不實用的頁面。所以我試圖說我在服務器端調用索引方法，它在刷新數據庫後給我數據列表，但是當我這樣做時。刷新的數據會附加到view上的數據上.i表示它會顯示剩餘數據和刷新數據，但實際上它只顯示刷新的數據。我的代碼：在Knockout.js中刪除數據後刷新ViewModel

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

來源

2013-09-27 SantyEssac

如果在服務器上的模式的轉變，也應該調用後更改客戶端，您的「更新數據」應該在Web服務調用後傳回，並用來刷新你的模型。 – BenW

多數民衆贊成多數民衆贊成在這裏，我也得到刷新的數據，但當你看到我調用GetTicket（）方法，做ajax調用，並採取行動，並從那裏採取所有的數據，之後，我推它。因爲其中它顯示我刷新數據和非刷新，所以我需要這個解決方案。 – SantyEssac

爲什麼不厭其煩地嘗試，當你問所有門票後不久，從數組中刪除一票？另外我想象如果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-27 22:16:58 Zholen

非常感謝!!! It works .... Saved My Day !!! ... – SantyEssac

在你的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

來源

2013-09-27 12:32:46

在Knockout.js中刪除數據後刷新ViewModel

回答

相關問題