訂位系統
接下來將會建置一個動態UI來訂座位與餐點，在ViewModel裡已經有：
// 姓名與餐點
function SeatReservation(name, initialMeal) {
var self = this;
self.name = name;
self.meal = ko.observable(initialMeal);
}
// 初始化狀態
// 預約ViewModel
function ReservationsViewModel() {
var self = this;
// 可選擇餐點(與價格)，不能編輯，應該來自伺服器。
self.availableMeals = [
{ mealName: "Standard (sandwich)", price: 0 },
{ mealName: "Premium (lobster)", price: 34.95 },
{ mealName: "Ultimate (whole zebra)", price: 290 }
];
// 可編輯資料。
// 使用可觀察陣列物件，內含兩筆初始化SeatReservation實體資料。
self.seats = ko.observableArray([
new SeatReservation("Steve", self.availableMeals[0]),
new SeatReservation("Bert", self.availableMeals[0])
]);
}
ko.applyBindings(new ReservationsViewModel());
- SeatReservation:一個簡單的JavaScript類別建構式，儲存姓名和餐點的選擇。
- ReservationsViewModel:ViewModel類別，進行以下處理：
- availableMeals: 提供餐點資料的JavaScript物件。
- seats：初始化SeatReservation實體集合的陣列。注意，它是ko.observableArray，這是一個與正規陣列當相的可觀察物件。每次新增或移除項目時，意味著它可以自動觸發ui更新。
ViewModel準備好了之後，以下是預設的View：
<h2>座位預約</h2>
<table>
<thead>
<tr>
<th>姓名</th><th>餐點</th><th>額外費用</th><th></th>
</tr>
</thead>
<!-- Todo: 在tbody產生主體 -->
<tbody></tbody>
</table>
現在<tbody>還沒有內容，更新<tbody>元素使用foreach繫結，它將呈現位於陣列裡的每個元素：
<tbody data-bind="foreach: seats"></tbody>
我們指定可觀察陣列元素seats來與foreach繫結關聯。然後補充一些<tr>元素以呈現每一個項目：
<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>
注意，因為meal屬性是一個可觀察物件，前篇說明過，讀取或寫入可觀察物件的值，必須當成函式呼叫。所以必須寫成meal().price來取得次屬性的值，而不是meal.price。
執行應用程式，你應該可以看到簡單關於座位預約的表格資訊。
foreach是流程控制繫結一個份子，包含有foreach、if、ifnot和with。這些使能夠構建任何種類的反覆運算（iterative）、條件運算或或基於動態ViewModel的巢狀UI。
