「knockout.jsの表示の内外でクリックしたときに何かする」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

knockout.jsの表示の内外でクリックしたときに何かする

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>knockout.jsの表示の内外でクリックしたときに何かする</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>
  9. <script type="text/javascript">
  10.   $(document).ready(function () {
  11.     ko.applyBindings(new ViewModel());
  12.     BindOfClickEvent();
  13.   });
  14.   
  15.   function ViewModel() {
  16.     var self = this;
  17.     self.jsonData = ko.observableArray();
  18.     $.getJSON("./testdata/testdataB.txt", {}, function(json){
  19.         self.jsonData(json.item);
  20.       }
  21.     );
  22.   }
  23.   
  24.   function BindOfClickEvent()
  25.   {
  26.     $('a.BehaviorClick').bind('click', EventWhenClick);
  27.   }
  28.   
  29.   var EventWhenClick = function (data, event) {
  30.     if (event != undefined)
  31.     {
  32.       // koの中の場合
  33.       htmlDom = event.target;
  34.       elmA = $(htmlDom).parents("a");
  35.     }
  36.     else
  37.     {
  38.       htmlDom = this;
  39.       elmA = $(htmlDom);
  40.     }
  41.     
  42.     elmImg = elmA.children("img");
  43.     
  44.     if ( $(htmlDom).parents("td").css("backgroundColor") == "transparent" )
  45.     {
  46.       elmImg.attr("src", "images/sample_flow2.gif");
  47.       $(htmlDom).parents("td").css("backgroundColor", "#ffffcc");
  48.     }
  49.     else
  50.     {
  51.       elmImg.attr("src", "images/sample_flow1.gif");
  52.       $(htmlDom).parents("td").css("backgroundColor", "transparent");
  53.     }
  54.     
  55.     return false;
  56.   };
  57.   
  58. </script>
  60. <style type="text/css">
  61. table{margin-top:0.5em;}
  62. th, td{
  63.   border:1px solid #ccc;
  64. }
  65. td
  66. {
  67.   padding:8px;
  68. }
  69. caption
  70. {
  71.   white-space:nowrap;
  72. }
  73. img
  74. {
  75.   border:1px solid #333;
  76. }
  77. </style>
  79. </head>
  80. <body>
  81. <h1>knockout.jsの表示の内外でクリックしたときに何かする</h1>
  82. <div class="wrap">
  83. <table>
  84.   <caption>ただの画像</caption>
  85.   <thead><tr><th>クリック</th></thead>
  86.   <tbody>
  87.   <tr>
  88.     <td><a href="#" class="BehaviorClick"><img src="images/sample_flow1.gif" /></a></td>
  89.   </tr>
  90.   </tbody>
  91. </table>
  92. <table>
  93.   <caption>knockout.jsでjsonを読み込み表示したもの</caption>
  94.   <thead><tr><th>品名</th><th>金額</th><th>クリック</th></thead>
  95.   <tbody data-bind="foreach: jsonData">
  96.     <tr>
  97.       <td data-bind="text: name"></td>
  98.       <td data-bind="text: price"></td>
  99.       <td><a href="#" data-bind="click: EventWhenClick"><img src="images/sample_flow1.gif" /></a></td>
  100.     </tr>
  101.   </tbody>
  102. </table>
  103. </div>
  105. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  106. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  107. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  108. </div>
  110. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  111. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  112. </div>
  114. </body>
  115. </html>