ボタンクリックでinputタグに切替(enableバインディング)
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <title>ボタンクリックでinputタグに切替(enableバインディング)</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">
- $(document).ready(function () {
- function viewModel() {
- var self = this;
- self.tourism = ko.observableArray();
- // 表示したいデータ:とりあえずコメントアウトしておく。
- self.tourism([
- { local: '九州地方', area: '太宰府', kind: '歴史遺産', description: '太宰府天満宮、大宰府政庁跡。', },
- { local: '東北地方', area: '大仙市', kind: '文化・自然・温泉', description: '大曲花火大会、秋ノ宮温泉郷など。', },
- { local: '北海道', area: '七飯', kind: '自然・保養', description: '大沼・小沼などの大沼国定公園、流山温泉。', },
- { local: '沖縄地方', area: '恩納', kind: '保養地・自然', description: 'ビーチリゾート、万座毛。', },
- { local: '北海道', area: '旭川', kind: '文化', description: 'アイヌ文化、旭山動物園など。', },
- { local: '九州地方', area: '指宿', kind: '保養・自然', description: '指宿温泉、開聞岳、池田湖、長崎鼻。', },
- { local: '九州地方', area: '鹿児島', kind: '歴史遺産・自然', description: '桜島、磯庭園、城山など。', },
- { local: '関東地方', area: '箱根', kind: '保養', description: '箱根温泉、芦ノ湖、箱根駅伝。', },
- { local: '中部地方', area: '黒部', kind: '自然・温泉', description: '宇奈月温泉などの温泉、黒部峡谷。', },
- { local: '中部地方', area: '名古屋', kind: '歴史遺産・文化', description: '名古屋城、熱田神宮、徳川美術館', },
- { local: '四国地方', area: '大洲', kind: '町並・歴史遺産', description: 'おはなはん通り、大洲城、鵜飼など。', },
- { local: '中国地方', area: '米子', kind: '保養・歴史遺産', description: '皆生温泉、米子城跡と城下町', },
- { local: '中国地方', area: '出雲市', kind: '自然・歴史遺産', description: '出雲大社、日御碕、立久恵峡など。', },
- { local: '沖縄地方', area: '南城市知念地区', kind: '歴史遺産', description: '世界遺産である斎場御嶽。', },
- ]);
- // データとは別にいくつか追加
- for (var i in self.tourism()) {
- // enableの追加:初期値として編集不可
- self.tourism()[i].editDataTourism = ko.observable(false);
- // 編集ボタンの初期値
- self.tourism()[i].btnLabel = ko.observable("編集");
- }
- // 「編集」ボタンが押されたとき
- self.gotoEditTourism = function(targetData) {
- // 他を編集不可にしておく。
- for (var num in self.tourism()) {
- // 自分自身じゃなければ色々といじる。
- if ( targetData.editDataTourism() != true ) {
- self.tourism()[num].editDataTourism(false);
- self.tourism()[num].btnLabel("編集");
- }
- }
- // inputの編集の可・不可
- targetData.editDataTourism( !targetData.editDataTourism() );
- // 編集ボタンの変更
- if ( targetData.editDataTourism() == true ) {
- targetData.btnLabel("確定");
- }
- else {
- targetData.btnLabel("編集");
- }
- };
- }
- ko.applyBindings(new viewModel());
- });
- </script>
- <style type="text/css">
- input[type=text]{
- background-color:#ffffdd;
- }
- input[type=text].edit{
- border:none;
- color:#000;
- background-color:#fff;
- }
- </style>
- </head>
- <body>
- <h1>ボタンクリックでinputタグに切替(enableバインディング)</h1>
- <table>
- <thead>
- <tr>
- <th>地方</th>
- <th>地域</th>
- <th>種別</th>
- <th>説明</th>
- <th>-</th>
- </tr>
- </thead>
- <tbody data-bind="foreach: tourism, visible: tourism">
- <tr>
- <td><input type="text" data-bind="css:{'edit': editDataTourism() == false}, value: local, enable: editDataTourism" /></td>
- <td><input type="text" data-bind="css:{'edit': editDataTourism() == false}, value: area, enable: editDataTourism" /></td>
- <td><input type="text" data-bind="css:{'edit': editDataTourism() == false}, value: kind, enable: editDataTourism" /></td>
- <td><input type="text" data-bind="css:{'edit': editDataTourism() == false}, value: description, enable: editDataTourism" /></td>
- <td><button data-bind="text: btnLabel, click: $root.gotoEditTourism"></button></td>
- </tr>
- </tbody>
- </table>
- <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>