Knockout Js:删除项目

时间:2017-03-17 10:19:50

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

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

2 个答案:

答案 0 :(得分: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)

答案 1 :(得分:0)

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