淘汰赛 Js：删除项目后 UI 未更新答案

【问题标题】：Knockout Js: UI is not updating after deleting Item淘汰赛 Js：删除项目后 UI 未更新
【发布时间】：2017-08-08 20:31:26
【问题描述】：

我正在使用 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)
  });

【问题讨论】：

标签： javascript jquery knockout.js knockout-mapping-plugin

【解决方案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)

【讨论】：

当我调用 self.GetUserDetails 时，我无法清除它并再次重新绑定 self.UserProfile
对不起，我不太明白你的问题。只需在您的应用启动时调用一次 GetUserDetails() 并像这样填充 UserProfile obervablearray：self.UserProfile(UserDetailsmappedData);
是的，谢谢，我一般问过，一旦我有 GetUserDetails()，所以在 GetUserDetails() 函数中，我不能像这样使用 self.UserProfile.removeall() 或 self.UserProfile([])在我点击 ajax 之前清除所有并再次绑定
你为什么不能这样做？您可以随时清除和填充 observable 数组。
如果我在 GetUserDetails() 中使用 self.UserProfile.removeall() 或 self.UserProfile([]) 它不会在 ajax 成功绑定，它将绑定空

【解决方案2】：

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

【讨论】：