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

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

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

「ASP.NET MVCとknockout.jsの連携：データをJSONで渡す」と同じ

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()」。

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