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()」を実行するかの違い。
今回は「「$(document).ready()」で「ko.applyBindings()」を実行する。」
ソース
コントローラー:Controllers/HomeController.cs
ビュー:Views/Home/Index.cshtml
- @{
- ViewBag.Title = "koでC#とJSON:ちょっと量が多い。";
- }
-
- <script type="text/javascript">
- $(document).ready(function () {
- // ko.applyBindingsで実行される中身?
- function viewModel() {
- var self = this;
-
- // ko.observable()で初期化?
- self.items = ko.observable();
-
- // $.getJSONでデータの読込み
- $.getJSON("@Url.Action("TestDataOfJson")", self.items);
- }
-
- // ドキュメントが読み込まれたらko.applyBindings()を実行
- ko.applyBindings(new viewModel());
- });
- </script>
-
- <h2>@ViewBag.Title</h2>
-
- <table>
- <thead>
- <tr>
- <th>id</th>
- <th>item</th>
- <th>price</th>
- </thead>
- <tbody data−bind="foreach: items">
- <tr>
- <td data−bind="text: id"></td>
- <td data−bind="text: item"></td>
- <td data−bind="text: price+' 円'"></td>
- </tr>
- </tbody>
- </table>
めも
ドキュメントが読み込まれたら~
まず、ドキュメントが読み込まれたら「ko.applyBindings()」をする。
引数は「new viewModel()」。
viewModel()が実行されたら~
表示したい「items」ってヤツを「ko.observable()」する。
その後「$.getJSON()」で「@Url.Action("TestDataOfJson")」を実行。
戻り値を「items」にいれる。
- @{
- ViewBag.Title = "koでC#とJSON:ちょっと量が多い。";
- }
- <script type="text/javascript">
- $(document).ready(function () {
- // ko.applyBindingsで実行される中身?
- function viewModel() {
- var self = this;
- // ko.observable()で初期化?
- self.items = ko.observable();
- // $.getJSONでデータの読込み
- $.getJSON("@Url.Action("TestDataOfJson")", self.items);
- }
- // ドキュメントが読み込まれたらko.applyBindings()を実行
- ko.applyBindings(new viewModel());
- });
- </script>
- <h2>@ViewBag.Title</h2>
- <table>
- <thead>
- <tr>
- <th>id</th>
- <th>item</th>
- <th>price</th>
- </thead>
- <tbody data−bind="foreach: items">
- <tr>
- <td data−bind="text: id"></td>
- <td data−bind="text: item"></td>
- <td data−bind="text: price+' 円'"></td>
- </tr>
- </tbody>
- </table>
めも
ドキュメントが読み込まれたら~
まず、ドキュメントが読み込まれたら「ko.applyBindings()」をする。
引数は「new viewModel()」。
引数は「new viewModel()」。
viewModel()が実行されたら~
表示したい「items」ってヤツを「ko.observable()」する。
その後「$.getJSON()」で「@Url.Action("TestDataOfJson")」を実行。
戻り値を「items」にいれる。
その後「$.getJSON()」で「@Url.Action("TestDataOfJson")」を実行。
戻り値を「items」にいれる。