Knockout.js教程中的反射

Reflection in Knockout.js tutorial

本文关键字：反射 教程 js Knockout      更新时间：2023-12-01

以下是Knockout.js教程网站上的代码：

function SeatReservation(name, initialMeal) {
var self = this;
self.name = name;
self.meal = ko.observable(initialMeal); 
} 
//View Model along with initialState
function ReservationsViewModel() {
var self = this; 
//Non-edible data
self.availableMeals = [
{mealName:"sandwhich", price: 0 },
{mealName: "Ribs", price:25 },
{mealName: "Steak", price: 50} 
]; 
//Edible data
self.seats = ko.observableArray([
new SeatReservation("Steve", self.availableMeals[0]),
new SeatReservation("Bert", self.availableMeals[0])
ko.applybindings(new ReservationsViewModel()):

视图：

<tbody data-bind="foreach: seats">
<td data-bind = "text:name"></td>
<td data-bind = "text: meal().mealName"></td>
<td data-bind = "text: meal().price"></td>

我不明白为什么视图调用meal().mealName和meal().price。我原以为是meal().availableMeals.mealName和meal().availableMeals.price。

如果您参考的是"使用列表和集合"教程的第2步（共5步），那么您之所以调用meal（）.milName和meal（

// 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.meal。这意味着，ReservationsViewModel有一个SeatReservations数组（由self.seats和observableArray表示），每个SeatReservations包含一顿饭。

可用密封的唯一目的是提供用于填充用餐可能性的数据，但它实际上并不是模型数据本身的表示。（可用的密封可以很容易地从数据库中读取并以这种方式填充数据）。

这在这个特定的代码中是如何工作的，当创建座位预订时，它需要一个名字和一个草签Meal。就本教程而言，这是addSeat函数：

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

请注意，ReservationsViewModel本身会创建一个新的SeatReservation，并传入可用的密封数据（请记住，这可能来自数据库），最终填充ViewModel，以便更新视图。

相关文章：