「クリックされた行に対して何かする」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

クリックされた行に対して何かする

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>クリックされた行に対して何かする</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.   function ViewModel() {
  11.     var self = this;
  12.     
  13.     // ▼各行に対して、専用のフラグみたいなヤツを持たせる
  14.     self.koAObj = ko.observable([ { xxx: "A123", view: ko.observable(false) }, 
  15.                                   { xxx: "A456", view: ko.observable(false) }, 
  16.                                   { xxx: "A789", view: ko.observable(false) } ]);
  17.     self.koAEdit = function(obj) {
  18.       obj.view(true);
  19.     }
  20.     self.koAEnd  = function(obj) {
  21.       obj.view(false);
  22.     }
  23.     
  24.     // ▼選択された行が何行かを別途持たせる場合
  25.     self.koBObj = ko.observable([ { xxx: "B123" }, 
  26.                                   { xxx: "B456" }, 
  27.                                   { xxx: "B789" } ]);
  28.     self.viewTemplate = ko.observable(-1);
  29.     self.koBEdit = function(obj) {
  30.       self.viewTemplate(self.koBObj().indexOf(obj));
  31.     }
  32.     self.koBEnd  = function(obj) {
  33.       self.viewTemplate(-1);
  34.     }
  35.   }
  36.   
  37.   $(document).ready(function () {
  38.     ko.applyBindings(new ViewModel());
  39.   });
  40. </script>
  42. <style type="text/css">
  43. h2{margin:0;}
  44. </style>
  46. </head>
  47. <body>
  49. <h1>クリックされた行に対して何かする</h1>
  51. <div style="border:1px solid #ccc; padding:0.5em;">
  52. <h2>各行にフラグを持たせる場合</h2>
  53. <ol data-bind="foreach: koAObj">
  54.   <li data-bind="template: {name: view() == true ? 'editA': 'viewA'}"></li>
  55.   
  56.   <script type="text/html" id="viewA">
  57.     <span data-bind="text: xxx"></span>：<button data-bind="click: $root.koAEdit">編集</button>
  58.   </script>
  59.   
  60.   <script type="text/html" id="editA">
  61.     <input type="text" data-bind="value: xxx" />：<button data-bind="click: $root.koAEnd">完了</button>
  62.   </script>
  63. </ol>
  64. </div>
  66. <div style="border:1px solid #ccc; padding:0.5em;margin-top:0.5em;">
  67. <h2>選択された行と各データのインデックス番号を比較する場合</h2>
  68. <ol data-bind="foreach: koBObj">
  69.   <li data-bind="template: {name: $index() == $root.viewTemplate() ? 'editB': 'viewB'}"></li>
  70.   
  71.   <script type="text/html" id="viewB">
  72.     <span data-bind="text: xxx"></span>：<button data-bind="click: $root.koBEdit">編集</button>
  73.   </script>
  74.   
  75.   <script type="text/html" id="editB">
  76.     <input type="text" data-bind="value: xxx" />：<button data-bind="click: $root.koBEnd">完了</button>
  77.   </script>
  78. </ol>
  79. </div>
  81. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  82. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  83. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  84. </div>
  86. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  87. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  88. </div>
  90. </body>
  91. </html>