Question

在分析collections tutorial时，我无法理解两点：

为什么我们必须在SeatReservation函数中将 initialMeal 变量定义为ko.observable？如果我删除了ko.observable，则视图中的foreach循环不起作用。
initialMeal 是一个数组。因此，应该使用ko.observableArray。但是，ko.observableArray不起作用。

我在example中发现了类似的模式。你能帮我解释一下这个问题吗？感谢。

查看

<table>
 <thead><tr>
     <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
 </tr></thead>
 <tbody data-bind="foreach: seats">
     <tr>
         <td data-bind="text: name"></td>
         <td data-bind="text: meal().mealName"></td>
         <td data-bind="text: meal().price"></td>
     </tr>    
 </tbody>
</table>

视图模型

function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);
}

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

    self.seats = ko.observableArray([
        new SeatReservation("Steve", self.availableMeals[0]),
        new SeatReservation("Bert", self.availableMeals[0])
    ]);

    self.addSeat = function() {
        self.seats.push(new SeatReservation("", self.availableMeals[0]));
    }
}

ko.applyBindings(new ReservationsViewModel());

Answer 1

为什么我们必须将initialMeal变量定义为ko.observable in SeatReservation功能？如果我删除ko.observable，foreach循环视图不起作用。

当它不是可观察的时候它不起作用，因为绑定meal().mealName和meal().price仍然期望可观察到。将它们更改为meal.mealName和meal.price，绑定将起作用。

请注意，如果不使用observable，则绑定是单向的，如果在加载页面后更改基础模型值，则不会更新绑定。

initialMeal是一个数组。因此，应该使用ko.observableArray。但是，ko.observableArray不起作用。

initialMeal不是数组，它是self.availableMeals数组中的一个元素，它是一个对象（例如{ mealName: "Standard (sandwich)", price: 0 }）。

Answer 2

从粗略的看，它看起来并不像你已经看过这个特定的教程一样。我认为完成本教程将为您解决一些问题。话虽如此，以下是您提出的问题的答案：

为什么我们必须在seatReservation函数中将initialMeal变量定义为ko.observable？？如果我删除ko.observable，则视图中的foreach循环不起作用。

鉴于您包含的标记，没有理由将膳食初始化为可观察的。实际上，您可以简单地将meal初始化为initialMeal（在SeatReservation构造函数中）并从mealName和price数据绑定中删除函数调用语法（括号）（在视图中）。

请记住，可观察变量都是关于通知订阅者其值的更改。因为在您的示例中，没有办法修改特定座位预订的膳食，所以没有理由将膳食初始化为可观察的。但是，如果您要在本教程中进一步学习，您会发现这顿饭需要初始化为可观察的值。

另外，您应该注意到observable实际上是函数。为了读取observable的值，你必须调用没有参数的observable（例如meal（））。

InitialMeal是一个数组。因此，应该使用ko.observableArray。但是，ko.observableArray不起作用。

InitialMeal实际上是一个对象，而不是一个数组。再看看ReservationsViewModel构造函数。传递给SeatReservation构造函数的值是availableMeals数组中的第一个元素，而不是数组本身。

集合教程中的ko.observable变量

2 个答案: