knockoutjs foreach array绑定 表格 下拉框绑定

转载http://desert3.iteye.com/blog/1480471

knockoutjs foreach array绑定 表格 下拉框绑定

博客分类：

 
• Javascript

 

Javascript代码  

1. // 下拉框绑定到$root.availableMeals数组，下拉框显示的文字内容由optionsText: 'mealName'决定，下拉框的值绑定到seats数组中对象SeatReservation的meal属性！  
2. <select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select>  

viewmodel（控制器） 

Javascript代码  

1. // Class to represent a row in the seat reservations grid  
2. function SeatReservation(name, initialMeal) {  
3.     var self = this;  
4.     self.name = name;  
5.     self.meal = ko.observable(initialMeal);  
6.       
7.     self.formattedPrice = ko.computed(function() {  
8.         var price = self.meal().price;  
9.         return price ? "$" + price.toFixed(2) : "None";          
10.     });  
11. }  
12.   
13. // Overall viewmodel for this screen, along with initial state  
14. function ReservationsViewModel() {  
15.     var self = this;  
16.   
17.     // Non-editable catalog data - would come from the server  
18.     self.availableMeals = [  
19.         { mealName: "Standard (sandwich)", price: 0 },  
20.         { mealName: "Premium (lobster)", price: 34.95 },  
21.         { mealName: "Ultimate (whole zebra)", price: 290 }  
22.     ];      
23.   
24.     // Editable data  
25.     self.seats = ko.observableArray([  
26.         new SeatReservation("Steve", self.availableMeals[0]),  
27.         new SeatReservation("Bert", self.availableMeals[0])  
28.     ]);  
29.       
30.     // Operations  
31.     self.addSeat = function() {  
32.         self.seats.push(new SeatReservation("", self.availableMeals[0]));  
33.     }  
34.     self.removeSeat = function(seat) { self.seats.remove(seat) }  
35.       
36.     self.totalSurcharge = ko.computed(function() {  
37.        var total = 0;  
38.        for (var i = 0; i < self.seats().length; i++)  
39.            total += self.seats()[i].meal().price;  
40.        return total;  
41.     });  
42. }  
43.   
44. ko.applyBindings(new ReservationsViewModel());  

view视图 

Html代码  

1. <h2>Your seat reservations</h2>  
2.   
3. <table>  
4.     <thead><tr>  
5.         <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>  
6.     </tr></thead>  
7.     <!-- Todo: Generate table body -->  
8.     <tbody data-bind="foreach: seats">  
9.         <tr>  
10.             <td><input data-bind="value: name" /></td>  
11.             <td><select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>  
12.             <td data-bind="text: meal().price"></td>  
13.             <td data-bind="text: formattedPrice"></td>  
14.             <td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>  
15.         </tr>      
16.     </tbody>  
17. </table>  
18. <h3 data-bind="visible: totalSurcharge() > 0">  
19.     Total surcharge: $<span data-bind="text: totalSurcharge().toFixed(2)"></span>  
20. </h3>  
21. <h2>Your seat reservations (<span data-bind="text: seats().length"></span>)</h2>  
22.   
23. <button data-bind="click: addSeat, enable: seats().length < 5">Reserve another seat</button>