Как удалить Knockout.js ObservableArray-объект после ajax-вызова

Question

Я пытаюсь удалить объект из ObservableArray после ajax-вызова. Он работает с функцией «.pop», но не тогда, когда я использую пользовательскую функцию knockout.js .remove.

Если я перехожу к функции «.remove» вне функции ajax-complete, «.remove» работает. Но я действительно предпочел бы его внутри «.complete».

Может ли кто-нибудь определить, что я делаю неправильно?

Это не работает:

self.removeItem = функция (данные) {

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

Я сделал jsfiddle, чтобы продемонстрировать: http://jsfiddle.net/6oe6dn7n/1/

мой взгляд, модель выглядит так:

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); 
    }); 
}; 
} 

И мой HTML выглядит так:

<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> 

Answer 1

Вы заменили "данные" изменяемый объект в контексте обработчика ответа:

был:

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

изменилась:

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

Я обновил fiddle , он работает для меня - по крайней мере удаляет элементы.

Answer 2

Вам необходимо использовать переменную данных, которая передается в 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.

Из документации: http://api.jquery.com/jQuery.ajax/

полный Типа: Function (jqXHR jqXHR, String textStatus) функция будет вызван, когда заканчивается запрос (после успеха и ошибок обратных вызовов выполняются). Функция получает два аргумента: объект jqXHR (в jQuery 1.4.x, XMLHTTPRequest) и строка, классифицирующая статус запроса («успех», «немодифицированный», «nocontent», «error», «timeout», прервать "или" parsererror ").