Knockout Js：删除项目后 UI 未更新

Question

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

您删除的用户配置文件永远不会从 observablearray 中删除，因为在调用 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，例如：

UserProfile.deleted(true)

Answer 2

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

Knockout Js：删除项目后 UI 未更新

Knockout Js: UI is not updating after deleting Item

javascript

jquery

knockout-mapping-plugin

knockout.js