knockout.js clickバインディングとaタグ
2012/04/23
clickイベント発生時に実行する処理でtrueを返す。
サンプルソース
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <title></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([
- { local: '九州地方', area: '太宰府', kind: '歴史遺産', description: '太宰府天満宮、大宰府政庁跡。', },
- { local: '東北地方', area: '大仙市', kind: '文化・自然・温泉', description: '大曲花火大会、秋ノ宮温泉郷など。', },
- { local: '北海道', area: '七飯', kind: '自然・保養', description: '大沼・小沼などの大沼国定公園、流山温泉。', },
- ]);
- // クリックしたときの処理
- self.clickData = function(clickTr) {
- ～ 色々と処理 ～
- // aタグのhref属性も利用するために「true」を返す。
- return true;
- };
- }
- ko.applyBindings(new viewModel());
- });
- </script>
- </head>
- <body>
- <table>
- <thead>
- <tr>
- <th>地方</th><th>地域</th><th>種別</th><th>説明</th>
- </tr>
- </thead>
- <tbody data-bind="foreach: tourism">
- <tr>
- <td><a data-bind='text: local, click: $root.clickData, attr: {href: "https://tips.recatnap.info/"}' target="_blank"></a></td>
- <td data-bind="text: area"></td>
- <td data-bind="text: kind"></td>
- <td data-bind="text: description"></td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
45行目のclickバインディングによって22行目のclickDataの処理をする。
26行目のように戻値にtrueを返してあげるとaタグのhrefが使えるようになる。