如何在ajax调用后删除Knockout.js ObservalArray对象

我试图在ajax调用后从ObservalArray中删除一个对象。它与“.pop”函数一起使用，但在使用自定义knockout.js“.remove”函数时不起作用

如果我将对“.remove”函数的调用移到ajax complete函数之外，“.remove”会起作用。但我真的宁愿把它放在“.complete”里面

谁能看出我做错了什么

这不起作用：

self.removietem=函数（数据）{

我制作了一个jsfiddle来演示：

我的视图模型如下所示：

var data = {
  Name: "Test",
  Items: ["One", "Two", "Three"]    
};

function ViewModel(data) {
  var self = this;
   self.Items = ko.observableArray(ko.utils.arrayMap(data.Items,   

function(item) {
    return { value: ko.observable(item) };
}));

self.removeItem = function(data) { 

    $.ajax({
        type: 'POST',
        url:'/echo/js/?js=hello%20world!',
        dataType: 'json',
        contentType: 'application/json',
        data: null
    }).complete(function (item,data)  {
             // This doesn't affect the observableArray.
             // 'self.Items.pop(data) does, however.
             self.Items.remove(data);
    });
};
}

<div>
    <table>
        <tbody data-bind="template: { name: 'itemTemplate', foreach: Items     }"></tbody>
    </table>
</div>
<script type="text/html" id="itemTemplate">
    <tr>
        <td>
            <input data-bind="value: value" />
            <a href="#" data-bind="click: $parent.removeItem">Remove     Item</a>
        </td>
    </tr>
</script>

我的HTML看起来是这样的：

var data = {
  Name: "Test",
  Items: ["One", "Two", "Three"]    
};

function ViewModel(data) {
  var self = this;
   self.Items = ko.observableArray(ko.utils.arrayMap(data.Items,   

function(item) {
    return { value: ko.observable(item) };
}));

self.removeItem = function(data) { 

    $.ajax({
        type: 'POST',
        url:'/echo/js/?js=hello%20world!',
        dataType: 'json',
        contentType: 'application/json',
        data: null
    }).complete(function (item,data)  {
             // This doesn't affect the observableArray.
             // 'self.Items.pop(data) does, however.
             self.Items.remove(data);
    });
};
}

<div>
    <table>
        <tbody data-bind="template: { name: 'itemTemplate', foreach: Items     }"></tbody>
    </table>
</div>
<script type="text/html" id="itemTemplate">
    <tr>
        <td>
            <input data-bind="value: value" />
            <a href="#" data-bind="click: $parent.removeItem">Remove     Item</a>
        </td>
    </tr>
</script>

您已经在响应处理程序的上下文中替换了“data”变量对象：

是：

我已经更新了，它对我有效-至少删除了项。

您已经在响应处理程序的上下文中替换了“data”变量对象：

是：

---

我已经更新了，它对我有效-至少删除了项。

您需要使用传递到removeItem的数据变量。相反，您可以使用完整回调的textStatus变量覆盖它。如下所示：

self.removeItem = function(data) { 
    $.ajax({
        type: 'POST',
        url:'/echo/js/?js=hello%20world!',
        dataType: 'json',
        contentType: 'application/json',
        data: null
    }).complete(function (item)  {
             self.Items.remove(data);
    });
};

self.Items.pop（数据）工作的原因是.pop实际上不接受任何参数。因此，您传入的数据从未被使用，调用只是弹出数组。完整回调方法中的第二个参数默认为textStatus响应

从文件中：

完成 类型：函数（jqXHR jqXHR，字符串textStatus） 请求完成时（在执行成功和错误回调后）要调用的函数。该函数传递两个参数：jqXHR（在jQuery 1.4.x中，XMLHTTPRequest）对象和一个对请求状态进行分类的字符串（“成功”、“未修改”、“无内容”、“错误”、“超时”、“中止”或“解析器错误”）

---

您需要使用传递到removeItem的数据变量。相反，您可以使用完整回调的textStatus变量覆盖它。如下所示：

self.removeItem = function(data) { 
    $.ajax({
        type: 'POST',
        url:'/echo/js/?js=hello%20world!',
        dataType: 'json',
        contentType: 'application/json',
        data: null
    }).complete(function (item)  {
             self.Items.remove(data);
    });
};

self.Items.pop（数据）工作的原因是.pop实际上不接受任何参数。因此，您传入的数据从未被使用，调用只是弹出数组。完整回调方法中的第二个参数默认为textStatus响应

从文件中：

完成 类型：函数（jqXHR jqXHR，字符串textStatus） 请求完成时（在执行成功和错误回调后）要调用的函数。该函数传递两个参数：jqXHR（在jQuery 1.4.x中，XMLHTTPRequest）对象和一个对请求状态进行分类的字符串（“成功”、“未修改”、“无内容”、“错误”、“超时”、“中止”或“解析器错误”）