集合教程中的 ko.observable 变量答案

【问题标题】：ko.observable variable in collections tutorial集合教程中的 ko.observable 变量
【发布时间】：2014-08-11 07:11:29
【问题描述】：

在分析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());

【问题讨论】：

标签： javascript knockout.js observable

【解决方案1】：

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

当它不是 observable 时它不起作用，因为绑定 meal().mealName 和 meal().price 仍然期望 observables。将它们更改为meal.mealName 和meal.price，绑定将起作用。

请注意，如果您不使用可观察对象，则绑定是单向的，如果在页面加载后更改了底层模型值，则不会更新。

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

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

【讨论】：

【解决方案2】：

粗略一看，您似乎并没有从头到尾看过这个特定的教程。我认为完成本教程将为您解决一些问题。话虽如此，以下是您提出的问题的答案：

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

鉴于您包含的标记，没有理由需要将餐初始化为可观察对象。事实上，您可以简单地将饭菜初始化为 initialMeal（在 SeatReservation 构造函数中），然后从 mealName 和价格数据绑定（在视图中）中删除函数调用语法（括号）。

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

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

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

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

【讨论】：