反思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> 

我不明白的是爲什麼認爲是調用膳食（）。膳食和膳食（）。價格。 （）。availableMeals.mealName and meal（）。availableMeals.price

Answer 1

如果您在使用列表和集合教程中引用了第5步中的第2步，那麼您稱之爲膳食（）.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和一個observableArray表示），每個SeatReservation包含一頓飯。

availableMeals的唯一目的是提供您將用來填充膳食可能性的數據，但它實際上並不代表模型數據本身。 （availableMeals可以很容易地從數據庫中讀取數據並以這種方式填充數據）。

這是如何在這段代碼中起作用的，當座位預留被創建時，它需要一個名字和一個initialMeal。對於本教程的目的，這是addSeat功能：

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

注意，ReservationsViewModel本身創建一個新的SeatReservation並將在availableMeal數據（請記住，這可以從數據庫中來），其中，最終，填充ViewModel，以便您的視圖更新。