淘汰js可观察数组删除所有项目

Question

我是淘汰 js 的新手。我正在尝试从淘汰赛可观察数组中删除一个项目。但是 remove 函数正在删除数组中的所有项目。有人可以帮我解决这个问题吗？

以下是我的视图模型的样子

function ReservationsViewModel() {
var self = this;
 self.availableMeals = ko.observableArray([
    { mealName: "Standard (sandwich)", price: 0 },
    { mealName: "Premium (lobster)", price: 34.95 },
    { mealName: "Ultimate (whole zebra)", price: 290 }
]);    


self.seats = ko.observableArray([]);


self.addSeat = function() {
    self.seats.push(self.availableMeals());
}
self.removeSeat = function(seat) { self.seats.remove(seat) }
}

ko.applyBindings(new ReservationsViewModel());

这里是js小提琴

http://jsfiddle.net/pQN32/

谢谢，

普拉文。

Answer 1

每次调用self.availableMeals()，都会返回相同的数组对象。不是具有相同属性和值的对象，而是相同的对象。这意味着self.seats 包含同一对象的多个副本。

Knockout 的 remove 函数将 === 的所有项目删除到您传入的参数中，在这种情况下，这意味着它将从源数组中删除 所有 项目，因为它们都是相同的.

由于您没有在任何地方使用实际推送的值，您可以只推送一个虚拟值：

self.addSeat = function() {
    self.seats.push({});
}

Answer 2

正如@DCoder 所说，您每次都将相同的对象添加到数组中。并且删除函数会删除数组中所有重复的对象。

你的代码是你尝试做的一半。

首先，这是一个更新的 jsfiddle 做你想做的事（我认为）。

http://jsfiddle.net/pQN32/5/

顺便说一句，如果你的availableMeals 永远不会改变，你就不需要ko.observableArray

HTML

<h2>Your seat reservations (<span data-bind="text: seats().length"></span>)</h2>

<table>
    <thead><tr>
        <th>Passenger name</th><th>Meal</th><th>Price</th><th>Surcharge</th><th></th>
    </tr></thead>
    <tbody data-bind="foreach: seats">
        <tr>
            <td data-bind="text: name"></td>
            <td><select data-bind="options: $root.availableMeals, optionsText: 'mealName', value: meal"></select></td>
            <td data-bind="text: formattedPrice"></td>
            <td></td>
            <td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>

        </tr>    
    </tbody>
</table>

<input data-bind="value: customerName, valueUpdate: 'afterkeydown'" placeHolder="Customer Name"/>
<select data-bind="options: availableMeals, optionsText: 'mealName', value: selectedMeal, optionsCaption: 'Select a meal...'"></select>
<button data-bind="click: addSeat, enable: seats().length < 5 && selectedMeal() && customerName() && customerName().length > 0">Reserve another seat</button>

JS

// Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);

    self.formattedPrice = ko.computed(function() {
        var price = self.meal().price;
        return price ? "$" + price.toFixed(2) : "None";        
    });    
}

// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
    var self = this;

    // Non-editable catalog data - would come from the server
    self.availableMeals = [
        { mealName: "Standard (sandwich)", price: 0 },
        { mealName: "Premium (lobster)", price: 34.95 },
        { mealName: "Ultimate (whole zebra)", price: 290 }
    ];

    self.selectedMeal = ko.observable();
    self.customerName = ko.observable();

    // Editable data
    self.seats = ko.observableArray([]);

    // Operations
    self.addSeat = function() {
        self.seats.push(new SeatReservation(self.customerName(), self.selectedMeal()));

        // reset inputs
        self.customerName(undefined);
        self.selectedMeal(undefined);
    }
    self.removeSeat = function(seat) { self.seats.remove(seat) }
}

ko.applyBindings(new ReservationsViewModel());