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

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

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

博客分类：

• Javascript

 

动态表格使用observable arrays and the foreach 
ko.observableArray： 观察者模式，根据array动态更新表格

ko中的流程控制标签：foreach, if, ifnot, and with 
在foreach的数据源发生变化时，ko并不会重新生成整个table， 更高效地，ko会找到viewmodel中变化的部分， 然后更新数据变化对应的最小DOM集合。

data-bind="foreach: seats"：foreach表格循环 
meal().price： meal属性是一个被观察对象，在尝试取得子属性之前要使用meal()函数，即注意是meal().price, 不是 meal.price

data-bind="click: addSeat, enable: seats().length < 5"：表示按钮绑定到click事件addSeat，并且按钮只在表格数据小于5时可用，删错或者增加表格数据，由于ko的自动依赖追踪机制，按钮的可用状态会自动变化。

data-bind="visible: totalSurcharge() > 0":用来控制控件是否显示，对应css的display 属性

$root.前缀代表Knockout去viewmodel的顶层查询相应属性，而不是绑定表格seats数组中的实例变量SeatReservation中查询。

必须是引用方法的形式（带括号）引用observable变量，这与ko的自动依赖追踪相对象（如果是属性的话，就仅仅引用变量的值，做不到其他效果）

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

viewmodel（控制器）

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. self.formattedPrice = ko.computed(function() {
7. var price = self.meal().price;
8. return price ? "$" + price.toFixed(2) : "None";
9. });
10. }
11. // Overall viewmodel for this screen, along with initial state
12. function ReservationsViewModel() {
13. var self = this;
14. // Non-editable catalog data - would come from the server
15. self.availableMeals = [
16. { mealName: "Standard (sandwich)", price: 0 },
17. { mealName: "Premium (lobster)", price: 34.95 },
18. { mealName: "Ultimate (whole zebra)", price: 290 }
19. ];
20. // Editable data
21. self.seats = ko.observableArray([
22. new SeatReservation("Steve", self.availableMeals[0]),
23. new SeatReservation("Bert", self.availableMeals[0])
24. ]);
25. // Operations
26. self.addSeat = function() {
27. self.seats.push(new SeatReservation("", self.availableMeals[0]));
28. }
29. self.removeSeat = function(seat) { self.seats.remove(seat) }
30. self.totalSurcharge = ko.computed(function() {
31. var total = 0;
32. for (var i = 0; i < self.seats().length; i++)
33. total += self.seats()[i].meal().price;
34. return total;
35. });
36. }
37. ko.applyBindings(new ReservationsViewModel());

view视图

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