Knockoutjs observablearray使单个项目可观察

knockoutjs observablearray make individual item observable

本文关键字：观察 项目 单个 observablearray Knockoutjs      更新时间：2023-09-26

我正在寻找@ 2' d教程"与列表和集合工作"在Knockoutjs.com: http://learn.knockoutjs.com/#/?tutorial=collections

HTML:

您的座位预订()

<table>
<thead><tr>
    <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
</tr></thead>
<!-- Todo: Generate table body -->
<tbody data-bind="foreach: seats">
    <tr>
        <td> <input data-bind="value: name()"/></td>
        <td> <select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>
        <td data-bind="text: formatterPrice"></td>
        <!--<td> <a href="#" data-bind="click: $root.removeSeat">Remove</a></td>-->
        <td> <button data-bind="click: $root.removeSeat">Remove</button></td>
    </tr>
</tbody>
</table>
<button data-bind="click: addSeat, enable: seats().length < 5">Reserve another seat</button>
<h3 data-bind="visible: totalSurcharge() > 0">
Total surcharge: $<span data-bind="text: totalSurcharge().toFixed(2)"></span>
</h3>
<span data-bind="text: seats()[0].name()" ></span> <br/>
<span data-bind="text: seats()[0].meal().mealName" />

ViewModel: 

// Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal) {
var self = this;
self.name = ko.observable(name);
self.meal = ko.observable(initialMeal);
self.formatterPrice = 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.958989 },
    { mealName: "Ultimate (whole zebra)", price: 290.00000 }
];    
// Editable data
self.seats = ko.observableArray([
    new SeatReservation("Steve", self.availableMeals[0]),
    new SeatReservation("Bert", self.availableMeals[1])
]);
self.addSeat = function() {
    self.seats.push(new SeatReservation("Steve", self.availableMeals[2]))
};
self.removeSeat = function(seat) {
    self.seats.remove(seat);
}
self.totalSurcharge = ko.computed(function() {
    var total = 0;
    for(var i = 0; i < self.seats().length; i++) {
        total += self.seats()[i].meal().price;
    }
    // alert(total);
    return total;
});    
}
ko.applyBindings(new ReservationsViewModel());

当我试图改变"名称"在文本框中，我的observableArray(座位)似乎没有改变。如果我试图改变第一行的文本框，我的span @ bottom仍然显示"Steve"。

我已经把name()作为可观察的和meal一样，如果我改变meal(下拉菜单)，我的observableArray (seats)似乎起作用了。

请帮忙!

at

<td> <input data-bind="value: name()"/></td>

使用<td> <input data-bind="value: name"/></td>

在<span data-bind="text: seats()[0].name()" ></span> <br/>你想要<span data-bind="text: seats()[0].name" ></span> <br/>

相关文章：