knockoutjsちゅーとりある:データをテーブルにforeachで出力

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>knockoutjsちゅーとりある:データをテーブルにforeachで出力</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  8. <script type="text/javascript">
  9.   $(function () {
  10.     function SeatReservation(name, initialMeal) {
  11.       var self = this;
  12.       self.name = name;
  13.       self.meal = ko.observable(initialMeal);
  14.     }
  15.     function ReservationsViewModel() {
  16.       var self = this;
  17.       self.availableMeals = [
  18.         { mealName: "Standard (sandwich)",    price: 0 },
  19.         { mealName: "Premium (lobster)",      price: 34.95 },
  20.         { mealName: "Ultimate (whole zebra)", price: 290 }
  21.       ];
  22.       self.seats = ko.observableArray([
  23.         new SeatReservation("Steve", self.availableMeals[0]),
  24.         new SeatReservation("Bert",  self.availableMeals[1])
  25.       ]);
  26.     }
  27.     ko.applyBindings(new ReservationsViewModel());
  28.   })();
  29. </script>
  30. </head>
  31. <body>
  32. <table>
  33. <thead><tr>
  34.   <th>Passenger name</th><th>Meal</th><th>Surcharge</th>
  35. </tr></thead>
  36. <tbody data-bind="foreach: seats">
  37. <tr>
  38.   <td data-bind="text: name"></td>
  39.   <td data-bind="text: meal().mealName"></td>
  40.   <td data-bind="text: meal().price"></td>
  41. </tr>
  42. </tbody>
  43. </table>
  44. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  45. <a href="http://tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  46. <a href="http://tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  47. </div>
  48. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  49. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  50. </div>
  51. </body>
  52. </html>