knockout.js clickバインディングとaタグ

2012/04/23
clickイベント発生時に実行する処理でtrueを返す。

サンプルソース

  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.  
  9. <script type="text/javascript">
  10.   $(document).ready(function () {
  11.     function viewModel() {
  12.       var self = this;
  13.  
  14.       // 表示するデータ
  15.       self.tourism = ko.observableArray([
  16.         { local: '九州地方', area: '太宰府', kind: '歴史遺産', description: '太宰府天満宮、大宰府政庁跡。', },
  17.         { local: '東北地方', area: '大仙市', kind: '文化・自然・温泉', description: '大曲花火大会、秋ノ宮温泉郷など。', },
  18.         { local: '北海道', area: '七飯', kind: '自然・保養', description: '大沼・小沼などの大沼国定公園、流山温泉。', },
  19.       ]);
  20.  
  21.       // クリックしたときの処理
  22.       self.clickData = function(clickTr) {
  23.         ~ 色々と処理 ~
  24.  
  25.         // aタグのhref属性も利用するために「true」を返す。
  26.         return true;
  27.       };
  28.  
  29.     }
  30.  
  31.     ko.applyBindings(new viewModel());
  32.   });
  33. </script>
  34.  
  35. </head>
  36. <body>
  37. <table>
  38. <thead>
  39. <tr>
  40. <th>地方</th><th>地域</th><th>種別</th><th>説明</th>
  41. </tr>
  42. </thead>
  43. <tbody data-bind="foreach: tourism">
  44. <tr>
  45. <td><a data-bind='text: local, click: $root.clickData, attr: {href: "https://tips.recatnap.info/"}' target="_blank"></a></td>
  46. <td data-bind="text: area"></td>
  47. <td data-bind="text: kind"></td>
  48. <td data-bind="text: description"></td>
  49. </tr>
  50. </tbody>
  51. </table>
  52.  
  53. </body>
  54. </html>

45行目のclickバインディングによって22行目のclickDataの処理をする。
26行目のように戻値にtrueを返してあげるとaタグのhrefが使えるようになる。

新着(ニュース関連以外)

2018-07-26
年賀状で「新春」とか書くけど・・・何故なんだろうと8月を目前にした今、疑問に思った。
2018-05-16
PHPで画像のヘッダ情報(?)の「Orientation」を元に画像回転させたい。
2018-03-05
Android Studioをインストール。エミュレータを軽くするトコまで終わらせたかったけど、挫折した。
2018-02-23
プッシュ通知について調べてた時にでてきたServiceWorker。そのServiceWorkerについてのメモ。
2017-12-13
jqueryで取得したDOM要素をオブジェクトじゃなくて、配列で受け取りたい