ko内でのインスタンス(ビューモデルオブジェクトのインスタンス化?)
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <title>ko内でのインスタンス(ビューモデルオブジェクトのインスタンス化?)</title>
- <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
- <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
- <script type="text/javascript">
- /* ==============================================================
- ▼ko内で使うクラス
- ============================================================== */
- var koClassCalendar = function()
- {
- var self = this;
- self.Iptdata = ko.observable("");
- self.Arydata = ko.observableArray();
- self.AryAssdata = ko.observableArray();
- self.viewIptdata = function() {
- alert(self.Iptdata());
- }
-
- self.viewOne = function(a) {
- alert(a.name + "(" + a.price + "円)");
- }
-
- self.viewTwo = function(a, b) {
- var name = self.AryAssdata()[b()].name;
- var price = self.AryAssdata()[b()].price;
- alert(name + "・" + a + "(" + price + "円)");
- }
-
- }
-
- /* ==============================================================
- ▲ko内で使うクラス
- ============================================================== */
-
- // knockout.js ===============================================
- function ViewModel() {
- var self = this;
- self.test01 = new koClassCalendar();
- self.test02 = new koClassCalendar();
-
- ary01 = ([
- {"name": "ねぎ間", "price": "168", "taste": "味噌、ポン酢、芥子" },
- {"name": "ハツ", "price": "136", "taste": "塩、味噌" },
- {"name": "レバー", "price": "136", "taste": "塩、味噌、芥子" },
- {"name": "ぼんちり", "price": "136", "taste": "塩、味噌、ポン酢、芥子" },
- {"name": "はらみ", "price": "136", "taste": "塩、たれ、芥子" },
- {"name": "うずら玉子", "price": "136", "taste": "味噌、芥子" }
- ]);
- ary02 = ([
- {"name": "なんこつ", "price": "136", "taste": "塩、ポン酢" },
- {"name": "手羽先", "price": "168", "taste": "塩、たれ、味噌、ポン酢、芥子" },
- {"name": "せせり", "price": "136", "taste": "塩、味噌、芥子" },
- {"name": "白レバー", "price": "168", "taste": "味噌、ポン酢" },
- {"name": "コニク", "price": "110", "taste": "" },
- {"name": "丸ごとシマウマ","price": "290", "taste": "塩、たれ、味噌、ポン酢、芥子" }
- ]);
- ary11 = ([
- {"name" : "ねぎ間",
- "price": "151",
- "taste": new Array("味噌", "ポン酢", "芥子")},
- {"name" : "ハツ",
- "price": "122",
- "taste": new Array("塩", "味噌")},
- {"name" : "レバー",
- "price": "122",
- "taste": new Array("塩", "味噌", "芥子")},
- {"name" : "ぼんちり",
- "price": "122",
- "taste": new Array("塩", "味噌", "ポン酢", "芥子")},
- {"name" : "はらみ",
- "price": "122",
- "taste": new Array("塩", "たれ", "芥子")}
- ]);
- ary12 = ([
- {"name" : "うずら玉子",
- "price": "122",
- "taste": new Array("味噌", "芥子")},
- {"name" : "なんこつ",
- "price": "122",
- "taste": new Array("塩", "ポン酢")},
- {"name" : "手羽先",
- "price": "151",
- "taste": new Array("塩", "たれ", "味噌", "ポン酢", "芥子")},
- {"name" : "せせり",
- "price": "122",
- "taste": new Array("塩", "味噌", "芥子")},
- {"name" : "白レバー",
- "price": "151",
- "taste": new Array("味噌", "ポン酢")},
- {"name" : "コニク",
- "price": "100",
- "taste": new Array("")},
- {"name" : "丸ごとシマウマ",
- "price": "261",
- "taste": new Array("塩", "たれ", "味噌", "ポン酢", "芥子")}
- ]);
- self.test01.Iptdata("あはは");
- self.test02.Iptdata("うふふ");
- self.test01.Arydata(ary01);
- self.test02.Arydata(ary02);
- self.test01.AryAssdata(ary11);
- self.test02.AryAssdata(ary12);
- }
- $(document).ready(function () {
- ko.applyBindings(new ViewModel());
- });
- </script>
- <style type="text/css">
- .box{
- margin-top:1em;
- padding:5px;
- border:1px solid #ccc;
- }
- td{font-size:12px;border:1px solid #ccc;}
- .cssClick{
- cursor: pointer;
- }
- .cssClick:hover{
- color:red;
- }
- </style>
- </head>
- <body>
- <h1>ko内でのインスタンス(ビューモデルオブジェクトのインスタンス化?)</h1>
- <div>
- <div data-bind="with: test01" class="box">
- <!-- ko template: {name: 'testTemplate'} --><!-- /ko -->
- </div>
- <div data-bind="with: test02" class="box">
- <!-- ko template: {name: 'testTemplate'} --><!-- /ko -->
- </div>
- </div>
- <script type="text/html" id="testTemplate">
- <input type="text" data-bind="value: Iptdata" />
- <button data-bind="click: viewIptdata">←をアラート出力するボタン</button><br />
- <br />
- クリックした行の値をアラート表示するだけ
- <table data-bind="foreach: Arydata">
- <tr data-bind="click: $parent.viewOne, css: {'cssClick': true}">
- <td data-bind="text: $index"></td>
- <td data-bind="text: name"></td>
- <td data-bind="text: price"></td>
- <td data-bind="text: taste"></td>
- </tr>
- </table>
- <br />
- クリックした味の値をアラート表示するだけ
- <table data-bind="foreach: AryAssdata">
- <tr>
- <td data-bind="text: $index"></td>
- <td data-bind="text: name"></td>
- <td data-bind="text: price"></td>
- <td data-bind="foreach: taste">
- [<span data-bind="text: $data, css: {'cssClick': true}, click: function(){$parents[1].viewTwo($data, $parentContext.$index)}"></span>]
- </td>
- </tr>
- </table>
- </script>
- <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
- <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
- <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
- </div>
- <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
- Copyright © 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
- </div>
- </body>
- </html>