Как мне удалить объект из массива объектов. в нокауте Ошибка: объект не поддерживает свойство или метод «удалить»

Question

Как мне удалить объект из массива объектов в Knockoutjs. Я новичок в knockoutjs, и любая помощь будет оценена.

Ссылка на Jsfiddle

Строка 24 в HTML-коде на jsfiddle - это привязка клика для удаления. Строка 67 в коде javascript на js fiddle - это то место, где создается функция для удаления объекта из массива. Я пытался использовать функции indexOf и сплайсинга Array в строках 68 и 69, и это работало для удаления, но DOM не обновлялся. Пожалуйста, посмотрите на функцию removeProduct: function (product)

Html

<div>List of Product (<span data-bind="text: products().length"></span>) 
</div>
<ul data-bind="foreach: products">
    <li><span data-bind="text:name"></span>
        <a href="#" data-bind="click: $root.removeProduct">Select</a>
    </li>

</ul>
<div>List of Group Ideas</div>
<ul data-bind="foreach: GroupIdeas">
    <li data-bind="text:name">
        <input type="button" value="Removethis" />
        <input type="button" value="vote" />
    </li>

</ul>
<div>List of Group members</div>
</body>

 Javascript



$(function () {
var viewModel = {
    productPrice: ko.observable(89),
    productQty: ko.observable(2),

    products: ko.observable([
        { name: "shoe", price: "788", id: 1 },
        { name: "blouse", price: "50", id: 2 },
        { name: "dress", price: "16", id: 3 },
        { name: "lipstick", price: "88", id: 4 },
        { name: "earring", price: "4", id: 5 },
        { name: "bra", price: "96", id: 6 },
        { name: "lingeringe", price: "48", id: 7 },
        { name: "neclace", price: "36", id: 8 },
    ]),
    GroupIdeas: ko.observable([
        { name: "shoe", price: "788", prodId: 1, selectedby: "Akuba", memId: 
1, votes: 3 },
        { name: "lingeringe", price: "48", prodId: 7, selectedby: "Isaac", 
memId: 2, votes: 6 },
    ]),
    GroupMember: ko.observable([
        { name: "Akuba", relation: "friend", id: 1 },
        { name: "Isaac", relation: "Husband", id: 2 },
        { name: "Ira", relation: "Sister", id: 3 },
        { name: "Davida", relation: "Mum", id: 4 }
    ]),
    partyPerson: ko.observable("Ida"),
    partyOrganiser: ko.observable("Royce"),
    //addProduct = function () { /* ... leave unchanged ... */ }
    removeProduct: function (product) {
        /*var indexArr = viewModel.products().indexOf(product);
        viewModel.products().splice(indexArr, 1)
        */

        viewModel.products().remove(product)
        console.log(product);
    }
};

  viewModel.totalAmt = ko.computed(function () {
      return this.productPrice() * this.productQty();
   }, viewModel);


ko.applyBindings(viewModel);
//ko.applyBindings(giftModel);
})**

Answer 1

Вот ваша обновленная скрипка .

1. Вам нужно сделать products наблюдаемым массивом, чтобы воспользоваться функцией remove.

2. Прежде чем вы сможете обратиться к products, вам нужно сделать ссылку на модель представления, поэтому ваша функция removeProduct должна быть написана после инициализации модели представления. Аналогично тому, как вы написали totalAmt.

   viewModel.removeProduct = function (product) {
        viewModel.products.remove(function(item){
            return item.id === product.id;
        });
   }