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

めも

72行目でデータ数の表示

単純に「length」で件数を取得してくれる。

90行目でデータ数の表示

データ数が5件未満のときボタンを有効化。5件以上だとボタンを無効化。

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

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