如何使用knockout.js綁定下拉列表中的項目列表

Question

我正在致力於knockout.js。我對knockout.js非常陌生，所以iam下面的knockout.js教程。我試圖在下拉列表中顯示項目列表，基本上它是knockout.js教程中提供的實際示例。我已經寫了下面的代碼，

<script type="text/javascript"> 
     $(document).ready(function() { 
      function setreservation(name, initmeal) { 
       var self = this; 
       self.Name = name; 
       self.Meal = ko.observable(initmeal); 

       self.FormatPrice = ko.computed(function() { 
        return self.Meal().Price ? "$" + self.Meal().Price.toFixed(2) : "none"; 
       }); 
      } 

      function ReservationViewModel() { 
       var self = this; 
       self.availablemeals = [{ "MealName": "standard", "Price": 10 }, { "MealName": "premium", "Price": 20 }, { "MealName": "Platinum", "Price": 30}]; 
       self.seats = ko.observableArray([new setreservation("karthik", self.availablemeals[0]), new setreservation("Tirumalesh", self.availablemeals[1])]); 
       self.ReserveNewSeat = function() { 
        self.seats.push(new setreservation("karhik", self.availablemeals[2])); 
       }; 
      } 

      ko.applyBindings(new ReservationViewModel()); 
     }); 

和我的看法是一樣，

<table cellpadding="3" cellspacing="4"> 
<thead> 
<tr> 
<th>Name</th><th>Meal</th><th>Price</th> 
</tr> 
</thead> 
<tbody data-bind="foreach: seats"> 
<tr> 
<td><input data-bind="value:Name" /> 
</td> 
<td><select data-bind="options:$root.availablemeals,value:Meal,optionsText:MealName"></select></td> 
<td data-bind="text:FormatPrice"></td> 
</tr> 
</tbody> 
</table> 
<button data-bind="click:ReserveNewSeat">Reserve New One</button> 

所以請指導我做我的代碼，使得任何一點毛病。

Answer 1

您在optionsText錯過''結合：

這裏是工作提琴：http://jsfiddle.net/vyshniakov/DRDGK/