knockout.js 表示したデータを削除

2012/04/11

ソース

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF−8">
  5. <title>knockoutjsちゅーとりある:データを削除する</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.     // 表示部
  12.     function SeatReservation(name, initialMeal) {
  13.       var self = this;
  14.  
  15.       // data−bindの各ラベル?に対応する値の設定
  16.       self.name = name;
  17.       self.meal = ko.observable(initialMeal);
  18.  
  19.       // 「price」がfalseの時は「None」と表示させる
  20.       self.formattedPrice = ko.computed(function() {
  21.         var price = self.meal().price;
  22.         return price ? "$" + price.toFixed(2) : "None";
  23.       });  
  24.     }
  25.  
  26.     // ko.applyBindings()が呼ばれたときに実行される
  27.     function ReservationsViewModel() {
  28.       var self = this;
  29.  
  30.       // データ
  31.       self.availableMeals = [
  32.         { mealName: "Standard (sandwich)", price: 0 },
  33.         { mealName: "Premium (lobster)", price: 34.95 },
  34.         { mealName: "Ultimate (whole zebra)", price: 290 }
  35.       ];
  36.  
  37.       // 最初に表示するデータ(<table>の<tbody>のdata−bindのラベル?が「seats」の中身)
  38.       self.seats = ko.observableArray([
  39.         new SeatReservation("Steve", self.availableMeals[0]),
  40.         new SeatReservation("Bert", self.availableMeals[0])
  41.       ]);
  42.  
  43.       // Priceの総額
  44.       self.totalSurcharge = ko.computed(function() {
  45.         var total = 0;
  46.         for (var i = 0; i < self.seats().length; i++)
  47.         {
  48.           total += self.seats()[i].meal().price;
  49.         }
  50.         return total;
  51.       });  
  52.  
  53.       // 「Reserve another seat」をクリックしたときpush()する
  54.       self.addSeat = function() {
  55.         self.seats.push(new SeatReservation("", self.availableMeals[0]));
  56.       }
  57.       
  58.       // 「Remove」をクリックしたときremove()する
  59.       self.removeSeat = function(seat) {
  60.         self.seats.remove(seat)
  61.       }
  62.       
  63.     }
  64.  
  65.     ko.applyBindings(new ReservationsViewModel());
  66.   })();
  67. </script>
  68.  
  69. </head>
  70. <body>
  71.  
  72. <table>
  73. <thead><tr>
  74.   <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
  75. </tr></thead>
  76.  
  77. <tbody data−bind="foreach: seats">
  78. <tr>
  79.   <td><input data−bind="value: name" /></td>
  80.   <td><select data−bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>
  81.   <td data−bind="text: formattedPrice"></td>
  82.   <td><a href="#" data−bind="click: $root.removeSeat">Remove</a></td>
  83. </tr>
  84. </tbody>
  85.  
  86. </table>
  87.  
  88. <button data−bind="click: addSeat">Reserve another seat</button>
  89.  
  90. <h3 data−bind="visible: totalSurcharge() > 0">
  91.   Total surcharge: $<span data−bind="text: totalSurcharge().toFixed(2)"></span>
  92. </h3>
  93.  
  94. </body>
  95. </html>

めも

82行目の「Remove」

59行目の「self.removeSeat」で「remove()」が実行されて削除される。

90行目の「visible: totalSurcharge()」

44行目で計算してくれている。

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

2018-07-26
年賀状で「新春」とか書くけど・・・何故なんだろうと8月を目前にした今、疑問に思った。
2018-05-16
PHPで画像のヘッダ情報(?)の「Orientation」を元に画像回転させたい。
2018-03-05
Android Studioをインストール。エミュレータを軽くするトコまで終わらせたかったけど、挫折した。
2018-02-23
プッシュ通知について調べてた時にでてきたServiceWorker。そのServiceWorkerについてのメモ。
2017-12-13
jqueryで取得したDOM要素をオブジェクトじゃなくて、配列で受け取りたい