ボタンクリックでinputタグに切替(ifとtemplateバインディング)

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>ボタンクリックでinputタグに切替(ifとtemplateバインディング)</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.   $(document).ready(function () {
  10.     function viewModel() {
  11.       var self = this;
  12.       self.tourism = ko.observableArray();
  13.       // 表示したいデータ:とりあえずコメントアウトしておく。
  14.       self.tourism([
  15.         { local: '九州地方', area: '太宰府', kind: '歴史遺産', description: '太宰府天満宮、大宰府政庁跡。', },
  16.         { local: '東北地方', area: '大仙市', kind: '文化・自然・温泉', description: '大曲花火大会、秋ノ宮温泉郷など。', },
  17.         { local: '北海道', area: '七飯', kind: '自然・保養', description: '大沼・小沼などの大沼国定公園、流山温泉。', },
  18.         { local: '沖縄地方', area: '恩納', kind: '保養地・自然', description: 'ビーチリゾート、万座毛。', },
  19.         { local: '北海道', area: '旭川', kind: '文化', description: 'アイヌ文化、旭山動物園など。', },
  20.         { local: '九州地方', area: '指宿', kind: '保養・自然', description: '指宿温泉、開聞岳、池田湖、長崎鼻。', },
  21.         { local: '九州地方', area: '鹿児島', kind: '歴史遺産・自然', description: '桜島、磯庭園、城山など。', },
  22.         { local: '関東地方', area: '箱根', kind: '保養', description: '箱根温泉、芦ノ湖、箱根駅伝。', },
  23.         { local: '中部地方', area: '黒部', kind: '自然・温泉', description: '宇奈月温泉などの温泉、黒部峡谷。', },
  24.         { local: '中部地方', area: '名古屋', kind: '歴史遺産・文化', description: '名古屋城、熱田神宮、徳川美術館', },
  25.         { local: '四国地方', area: '大洲', kind: '町並・歴史遺産', description: 'おはなはん通り、大洲城、鵜飼など。', },
  26.         { local: '中国地方', area: '米子', kind: '保養・歴史遺産', description: '皆生温泉、米子城跡と城下町', },
  27.         { local: '中国地方', area: '出雲市', kind: '自然・歴史遺産', description: '出雲大社、日御碕、立久恵峡など。', },
  28.         { local: '沖縄地方', area: '南城市知念地区', kind: '歴史遺産', description: '世界遺産である斎場御嶽。', },
  29.       ]);
  30.       // データとは別にいくつか追加
  31.       for (var i in self.tourism()) {
  32.         // enableの追加:初期値として編集不可
  33.         self.tourism()[i].editDataTourism = ko.observable(false);
  34.         // 編集ボタンの初期値
  35.         self.tourism()[i].btnLabel = ko.observable("編集");
  36.       }
  37.       // 「編集」ボタンが押されたとき
  38.       self.gotoEditTourism = function(targetData) {
  39.         // 他を編集不可にしておく。
  40.         for (var num in self.tourism()) {
  41.           // 自分自身じゃなければ色々といじる。
  42.           if ( targetData.editDataTourism() != true ) {
  43.             self.tourism()[num].editDataTourism(false);
  44.             self.tourism()[num].btnLabel("編集");
  45.           }
  46.         }
  47.         // inputの編集の可・不可
  48.         targetData.editDataTourism( !targetData.editDataTourism() );
  49.         // 編集ボタンの変更
  50.         if ( targetData.editDataTourism() == true ) {
  51.           targetData.btnLabel("確定");
  52.         }
  53.         else {
  54.           targetData.btnLabel("編集");
  55.         }
  56.       };
  57.     }
  58.     ko.applyBindings(new viewModel());
  59.   });
  60. </script>
  61. <style type="text/css">
  62. input[type=text]{
  63.   background-color:#ffffdd;
  64. }
  65. input[type=text].edit{
  66.   color:#000;
  67.   background-color:#fff;
  68. }
  69. </style>
  70. </head>
  71. <body>
  72. <h1>ボタンクリックでinputタグに切替(ifとtemplateバインディング)</h1>
  73. <p style="padding:1em 0;margin:0;font-size:0.8em;">「<a href="http://tips.recatnap.info/sample/?URL=032_template_if.html" target="_top">ボタンクリックでinputタグに切替(三項演算子)</a>」を使う方がソースが短い。</p>
  74. <table>
  75. <thead>
  76. <tr>
  77. <th>地方</th>
  78. <th>地域</th>
  79. <th>種別</th>
  80. <th>説明</th>
  81. <th>-</th>
  82. </tr>
  83. </thead>
  84. <tbody data-bind="foreach: tourism, visible: tourism">
  85. <!-- ko if: editDataTourism() == false -->
  86. <tr data-bind="template: {name: 'viewTourism'}"></tr>
  87. <!-- /ko -->
  88. <!-- ko if: editDataTourism() == true -->
  89. <tr data-bind="template: {name: 'editTourism'}"></tr>
  90. <!-- /ko -->
  91. </tbody>
  92. </table>
  93. <script type="text/html" id="viewTourism">
  94.   <td data-bind="text: local"></td>
  95.   <td data-bind="text: area"></td>
  96.   <td data-bind="text: kind"></td>
  97.   <td data-bind="text: description"></td>
  98.   <td><button data-bind="text: btnLabel, click: $root.gotoEditTourism"></button></td>
  99. </script>
  100. <script type="text/html" id="editTourism">
  101. <td><input type="text" css="edit" data-bind="value: local" /></td>
  102. <td><input type="text" css="edit" data-bind="value: area" /></td>
  103. <td><input type="text" css="edit" data-bind="value: kind" /></td>
  104. <td><input type="text" css="edit" data-bind="value: description" /></td>
  105. <td><button data-bind="text: btnLabel, click: $root.gotoEditTourism"></button></td>
  106. </script>
  107. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  108. <a href="http://tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  109. <a href="http://tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  110. </div>
  111. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  112. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  113. </div>
  114. </body>
  115. </html>