knockout.js 表示したデータを編集可能にする

2012/04/10

まだ、DBに書き込むとかデータをファイルの吐き出すとかまでじゃない。
たんに編集可能にしてるだけ。

ソース

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

めも

57行目のselectの「$root」

selectのdata−bind属性のoptionsで使われている「$root」ってのはknockout.jsが用意してくれている変数らしい。
こういった特殊な変数は「$data / $parent / $parents / $root」があり「現在のデータ、親のデータ、レベルごとの親、ルート」にあたるらしい。

『knockout.js 2.0.0 がリリースされたので試してみたAdd Star』の『Access to parent binding contexts』

57行目のselect

「value: meal, optionsText: 'mealName'」で14行目の「self.meal」で指定されているのが入ってるっぽい。

58行目のformattedPrice

16行目で設定してくれる。
18行目で三項演算子(?)ってヤツで値がtrueならそのまま値を、falseなら「None」が入ってる。

28行目の「whole zebra」について

データに「sandwich」「lobster」「whole zebra」とある。
「サンドイッチ」と「ロブスター」は分かるんだけど同列に「シマウマ」が理解できない。
knockout.jsの作り手の人は「シマウマ」を食材として見ているってことかな。

調べるとライオンキングのシンバのセリフに「I'm so hungry that I can eat a whole zebra!(シマウマ一頭食べられるくらい、お腹が空いた!)」ってのがあるらしい。

knockout.jsの作り手の人が食材を考えるのが面倒でココから使ったのか…それとも単純に好きなものを記載しただけかも。
好きな食べ物と好きな生き物、好きなフレーズの一部ってな感じで。

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

2017-11-09
PCでプッシュ通知ってのをしたい。
2017-11-06
PHPのバージョンを上げたらwikiが壊れたっぽい。
2017-08-03
formのinputでmaxlengthを使うとFirefoxでバグってた。他のブラウザでも気づかずにバグってたかもしれない。
2017-07-19
折れ線グラフをもう少しゆるやかに・・・というか何というか・・・調べていくと「移動平均」っていう言葉にたどり着いた
2017-07-10
FuelPHPの1.8をダウンロードして使っていたらセッションが使えないということに気付いた。