Отражение в Knockout.js учебнике

Question

Вот код, взятый с сайта учебник по 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> 

То, что я не понимаю, почему вид звонит еда(). едаName и еда(). цена. Я ожидал, что это будет еда(). AvailableMeals.mealName и meal(). AvailableMeals.price

Answer 1

Если вы имеете в виду шаг 2 из 5 в учебном пособии по работе со списками и коллекциями, то причина, по которой вы называете еду() .mealName и шрот() цена, потому что, если вы заметили, у вас есть это представление SeatReservation в этом коде:.

// 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 и наблюдаемым массивом), который каждый SeatReservation содержит еду.

Единственная цель доступных продуктов - предоставить данные, которые вы будете использовать для заполнения возможностей приема пищи, но на самом деле это не представление самих данных модели. (availableMeals можно было легко прочитать из базы данных и таким образом заполнить данные).

Как это работает в этом конкретном фрагменте кода, когда создается резервирование места, он ожидает имя и начальное значение. Для целей этого урока, это функция addSeat:

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

Обратите внимание, что сам по себе ReservationsViewModel создает новый SeatReservation и передает данные availableMeal (помните, что это может исходить из базы данных), чтобы, в конечном счете, заполнить ViewModel, чтобы ваше представление обновилось.