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

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