监控数组与foreach绑定-Knockout.js

html:

<h2>Your seat reservations</h2>

　　　 <tr>
　　　<th>Passenger name</th>

　　　　　　<th>Surcharge</th>

　　</thead>
  <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>
</table>
<select data-bind="foreach: seats">
  <option data-bind="text: name;value:text: meal().price"></option>
</select>

js代码：

// 一个构造函数
function SeatReservation(name, initialMeal) {
  var self = this;
  self.name = name;
  self.meal = ko.observable(initialMeal);
}

//数据模型
function ReservationsViewModel() {
var self = this;

//数据
  self.availableMeals = [
  { mealName: "Standard (sandwich)", price: 0 },
  { mealName: "Premium (lobster)", price: 34.95 },
  { mealName: "Ultimate (whole zebra)", price: 290 }
  ];

// 监控数组
  self.seats = ko.observableArray([
  new SeatReservation("Steve", self.availableMeals[0]),
  new SeatReservation("Bert", self.availableMeals[1])
  ]);
}
//传递数据
ko.applyBindings(new ReservationsViewModel());

效果页：

Your seat reservations

Passenger name	Meal	Surcharge
Steve	Standard (sandwich)	0
Bert	Premium (lobster)	34.95

Steve

Bert

巴特西

监控数组与foreach绑定-Knockout.js

Your seat reservations

最新文章

热门文章