ASP.NET MVCとknockout.jsの連携:データをJSONで渡す2

2012/04/15

ASP.NET MVCとknockout.jsの連携:データをJSONで渡す」のビュー側が好きじゃない記述なので修正した。

「$(document).ready()」で「$.getJSON()」を実行するか、
「$(document).ready()」で「ko.applyBindings()」を実行するかの違い。

今回は「「$(document).ready()」で「ko.applyBindings()」を実行する。」

ソース

コントローラー:Controllers/HomeController.cs

ビュー:Views/Home/Index.cshtml

  1. @{
  2.   ViewBag.Title = "koでC#とJSON:ちょっと量が多い。";
  3. }
  4.  
  5. <script type="text/javascript">
  6.   $(document).ready(function () {
  7.     // ko.applyBindingsで実行される中身?
  8.     function viewModel() {
  9.       var self = this;
  10.  
  11.       // ko.observable()で初期化?
  12.       self.items = ko.observable();
  13.  
  14.       // $.getJSONでデータの読込み
  15.       $.getJSON("@Url.Action("TestDataOfJson")", self.items);
  16.     }
  17.  
  18.     // ドキュメントが読み込まれたらko.applyBindings()を実行
  19.     ko.applyBindings(new viewModel());
  20.   });
  21. </script>
  22.  
  23. <h2>@ViewBag.Title</h2>
  24.  
  25. <table>
  26. <thead>
  27. <tr>
  28. <th>id</th>
  29. <th>item</th>
  30. <th>price</th>
  31. </thead>
  32. <tbody data−bind="foreach: items">
  33. <tr>
  34. <td data−bind="text: id"></td>
  35. <td data−bind="text: item"></td>
  36. <td data−bind="text: price+' 円'"></td>
  37. </tr>
  38. </tbody>
  39. </table>

めも

ドキュメントが読み込まれたら~

まず、ドキュメントが読み込まれたら「ko.applyBindings()」をする。
引数は「new viewModel()」。

viewModel()が実行されたら~

表示したい「items」ってヤツを「ko.observable()」する。
その後「$.getJSON()」で「@Url.Action("TestDataOfJson")」を実行。
戻り値を「items」にいれる。

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

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