knockout.js ボタンクリックで表示のデータ追加

2012/04/10

ソース

  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.  
  9. <script type="text/javascript">
  10.   $(function () {
  11.     function SeatReservation(name, initialMeal) {
  12.       var self = this;
  13.       self.name = name;
  14.       self.meal = ko.observable(initialMeal);
  15.     }
  16.  
  17.     function ReservationsViewModel() {
  18.       var self = this;
  19.  
  20.       self.availableMeals = [
  21.         { mealName: "Standard (sandwich)", price: 0 },
  22.         { mealName: "Premium (lobster)", price: 34.95 },
  23.         { mealName: "Ultimate (whole zebra)", price: 290 }
  24.       ];
  25.  
  26.       self.seats = ko.observableArray([
  27.         new SeatReservation("Steve", self.availableMeals[0]),
  28.         new SeatReservation("Bert", self.availableMeals[1])
  29.       ]);
  30.  
  31.       self.addSeat = function() {
  32.         self.seats.push(new SeatReservation("", self.availableMeals[2]));
  33.       }
  34.  
  35.     }
  36.  
  37.     ko.applyBindings(new ReservationsViewModel());
  38.   })();
  39. </script>
  40.  
  41. </head>
  42. <body>
  43.  
  44. <table>
  45. <thead><tr>
  46.   <th>Passenger name</th><th>Meal</th><th>Surcharge</th>
  47. </tr></thead>
  48.  
  49. <tbody data−bind="foreach: seats">
  50. <tr>
  51.   <td data−bind="text: name"></td>
  52.   <td data−bind="text: meal().mealName"></td>
  53.   <td data−bind="text: meal().price"></td>
  54. </tr>
  55. </tbody>
  56.  
  57. </table>
  58.  
  59. <button data−bind="click: addSeat">Reserve another seat</button>
  60.  
  61. </body>
  62. </html>

めも

「button」タグの「data-bind」属性で「click」アクションに対して「addSeat」を実行(?)ってな感じの記述を増やす。
31行目の「self.addSeat」でデータを追加しているみたい。
32行目の「self.seats.push()」で「seats」に「push()」。
「seats」ってのは49行目の「tbody」タグの「data-bind」属性の中で設定している。

「self.seats.push()」の「self」については「『knockout.js データ群をforeachで出力』の『「self = this」について』」でめもってる。

新着(ニュース関連以外)

2017-07-19
折れ線グラフをもう少しゆるやかに・・・というか何というか・・・調べていくと「移動平均」っていう言葉にたどり着いた
2017-07-10
FuelPHPの1.8をダウンロードして使っていたらセッションが使えないということに気付いた。
2017-06-27
MACにWin10をインストールしてみた:再挑戦。
2017-06-25
「簡単」っていうヤツらが多いけど・・・難しいぞ。
2017-06-06
FuelPHPのOILでtry・catchを使ったらエラーになった。