Knockout.js 淘汰js可观察数组删除所有项
我对击倒js还不熟悉。我试图从击倒可观察数组中删除一个项。但是remove函数正在删除数组中的所有项。有人能帮我吗 下面是我的viewmodel的外观Knockout.js 淘汰js可观察数组删除所有项,knockout.js,Knockout.js,我对击倒js还不熟悉。我试图从击倒可观察数组中删除一个项。但是remove函数正在删除数组中的所有项。有人能帮我吗 下面是我的viewmodel的外观 function ReservationsViewModel() { var self = this; self.availableMeals = ko.observableArray([ { mealName: "Standard (sandwich)", price: 0 }, { mealName: "Premium (l
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小提琴
谢谢
Praveen.每次调用
self.availableMeals()
,都会返回相同的数组对象。不是具有相同属性和值的对象,而是相同的对象。这意味着self.seats
包含同一对象的多个副本
Knockout的remove
函数将删除传入参数的所有=
项,在本例中,这意味着它将从源数组中删除所有项,因为它们都是相同的
由于您没有在任何地方使用实际的推送值,因此可以只推送一个虚拟值:
self.addSeat = function() {
self.seats.push({});
}
正如@DCoder所说,每次向数组添加相同的对象。移除函数移除数组中的所有重复对象 你的代码是你尝试做的一半 首先,这里是一个更新的JSFIDLE,它可以做您想做的事情(我想) 顺便说一句,如果您的
可用电子邮件
从未更改,则不需要ko.observearray
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>
// 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());