挖空 Js:删除项目后 UI 未更新

Question

我正在使用挖空JS，我有一个删除功能可以工作，但我的UI没有随着删除而更新，它显示已删除的项目，即使在我的数据库中，数据也已删除，我该如何解决这个问题？法典：

  function UserViewModel()
  {
    var self=this;
      self.UserProfile = ko.observableArray([]);
      //Get user all details
       self.GetUserDetails=function(){    
       $.ajax({
         type: "POST",
        dataType: "json",
        data: Model,
        url: serverUrl + 'api/controller/Action',
        success: function (data) {
      var UserDetailsmappedData = $.map(data, function (item) {
                    return new userModel(item);
                });
     self.UserProfile (self.UserProfile ().concat(UserDetailsmappedData));
        },
        })
        }
       //Delete Profile
      self.DeleteUserProfile = function (UserProfile)
      {
      var ProfilestatusID = (UserProfile.UserProfileID())
      console.log(ProfilestatusID)
      Model = { userID: ProfilestatusID }
      jQuery.support.cors = true;
      $.ajax({
         type: "POST",
        dataType: "json",
        data: Model,
        url: serverUrl + 'api/controller/Action',
        success: function (data) {
            self.GetUserDetails();
        }, 
         }) }
 //My Model
 function userModel(data){
    self.userId=ko.observable(data.userID);
    self.userName=ko.observable(data.userName);
    self.userImage=ko.observable(data.userImage)
  }
  $(document).ready(function () {
    viewModel=new UserViewModel();
    ko.applybindings(viewModel)
  });

Answer 1

您删除的用户配置文件永远不会从可观察数组中删除，因为旧数组总是在 GetUserDetails(( 调用后与更新的数组合并。

最好的办法是，如果您只是在成功回调中从数组中删除用户配置文件，而不是再次调用 GetUserDetails((。所以：

$.ajax({
     type: "POST",
    dataType: "json",
    data: Model,
    url: serverUrl + 'api/controller/Action',
    success: function (data) {
        self.UserProfile.remove(UserProfile); //DB is already updated, no
                                              //need to call 
                                              // GetUserDetails() again
    }, 
     }) }

或者，如果您出于任何原因想将已删除的项目保留在数组中，只需更新用户配置文件，例如：

UserProfile.deleted(true)

Answer 2

删除

后，您应该从可观察数组中删除已删除的项目 self.UserProfile ，这里似乎self.UserProfile(self.UserProfile().concat(UserDetailsmappedData));您正在将结果连接到现有数组