knockoutjs observablearray 使单个项目可观察

Question

我正在查看 Knockoutjs.com 上的 @ 2'nd 教程“使用列表和集合”：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() 设置为与用餐相同的可观察性，如果我更改用餐（下拉菜单），我的 observableArray（座位）似乎工作。

请帮忙！

Answer 1

在

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