knockout.js データ群をforeachで出力

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.  
  32.     ko.applyBindings(new ReservationsViewModel());
  33.   })();
  34. </script>
  35.  
  36. </head>
  37. <body>
  38.  
  39. <table>
  40. <thead><tr>
  41.   <th>Passenger name</th><th>Meal</th><th>Surcharge</th>
  42. </tr></thead>
  43.  
  44. <tbody data−bind="foreach: seats">
  45. <tr>
  46.   <td data−bind="text: name"></td>
  47.   <td data−bind="text: meal().mealName"></td>
  48.   <td data−bind="text: meal().price"></td>
  49. </tr>
  50. </tbody>
  51.  
  52. </table>
  53.  
  54. </body>
  55. </html>
  56.  

めも

tbodyでforeachする

  1. foreach(seats ~){
  2.   ~tbodyの中身~
  3. }

上記のような感じで記述すべき内容は「knockout.js」だと下記のようにする。

「<tbody data−bind="foreach: seats">」にする。
これで「seats」を「foreach」する。

meal()について

「meal().mealName」や「meal().price」は「SeatReservation()」で設定している「self.meal」と紐づく。
「self.meal」は「ReservationsViewModel()」で設定している「self.availableMeals」と紐づく。

HTML側の出力「meal.mealName」ではなく「meal().mealName」としているのは「meal」ってのが「observable」を使っていて、さらに「meal」ってのが配列?(オブジェクト?)だから。

「knockout.js」の「Tutorial:Working with Lists and Collections」の「Step 1 of 5」」に詳細が記載されている。下記が原文。

Notice that, because the meal property is an observable, it’s important to invoke meal() as a function (to obtain its current value) before attempting to read sub-properties. In other words, write meal().price, not meal.price.

「self = this」について

今回のソースだと「this」を「self」にいれる必要ないと思う。
「function」内で「function」を使うときに「self = this」を利用ってのが多いらしい。

  1. function funcRe(){
  2.   var self = this;
  3.   function funcCatnap(){
  4.     xxxSelf = self.xxx;
  5.     xxxThis = this.xxx;
  6.   }
  7. }
「funcCatnap()」内で「this」を使うと「funcCatnap()のthis」であって「funcRe()のthis」ではない。
「funcCatnap()」内で「funcRe()のthis」を使いたければ適当な変数に移しておく必要があるらしい。

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

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をダウンロードして使っていたらセッションが使えないということに気付いた。